diff --git a/apps/angular/8-pure-pipe/src/app/app.component.ts b/apps/angular/8-pure-pipe/src/app/app.component.ts
index 41dd38e25..019893c56 100644
--- a/apps/angular/8-pure-pipe/src/app/app.component.ts
+++ b/apps/angular/8-pure-pipe/src/app/app.component.ts
@@ -1,20 +1,17 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { HeavyComputationPipe } from './heavy-computation.pipe';
 
 @Component({
-  imports: [NgFor],
+  imports: [HeavyComputationPipe],
   selector: 'app-root',
   template: `
-    <div *ngFor="let person of persons; let index = index">
-      {{ heavyComputation(person, index) }}
-    </div>
+    @for (person of persons; track $index) {
+      <div>
+        {{ person | heavyComputation: $index }}
+      </div>
+    }
   `,
 })
 export class AppComponent {
   persons = ['toto', 'jack'];
-
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
 }
diff --git a/apps/angular/8-pure-pipe/src/app/heavy-computation.pipe.ts b/apps/angular/8-pure-pipe/src/app/heavy-computation.pipe.ts
new file mode 100644
index 000000000..514d6bb77
--- /dev/null
+++ b/apps/angular/8-pure-pipe/src/app/heavy-computation.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'heavyComputation',
+})
+export class HeavyComputationPipe implements PipeTransform {
+  transform(item: string, index: number): string {
+    return `${item} - ${index}`;
+  }
+}