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 a1164df21..0397b3cb1 100644
--- a/apps/angular/8-pure-pipe/src/app/app.component.ts
+++ b/apps/angular/8-pure-pipe/src/app/app.component.ts
@@ -1,19 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SimplePipe } from './simple-pipe.pipe';
 
 @Component({
   selector: 'app-root',
   changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [SimplePipe],
   template: `
     @for (person of persons; track person) {
-      {{ heavyComputation(person, $index) }}
+      {{ person | simplePipe: $index }}
     }
   `,
 })
 export class AppComponent {
-  persons = ['toto', 'jack'];
-
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
+  public persons: string[] = ['toto', 'jack'];
 }
diff --git a/apps/angular/8-pure-pipe/src/app/simple-pipe.pipe.ts b/apps/angular/8-pure-pipe/src/app/simple-pipe.pipe.ts
new file mode 100644
index 000000000..542bd4fac
--- /dev/null
+++ b/apps/angular/8-pure-pipe/src/app/simple-pipe.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'simplePipe',
+})
+export class SimplePipe implements PipeTransform {
+  transform(name: string, index: number): string {
+    return `${name} - ${index}`;
+  }
+}