From ada79661b54664259ee3b65fcf7d80d67fdb97ef Mon Sep 17 00:00:00 2001
From: Hung Pham <truonghungit@gmail.com>
Date: Fri, 17 Apr 2026 05:20:12 +0700
Subject: [PATCH] feat(challenge 8): implement heavy computation pipe for
 optimized rendering

---
 .../8-pure-pipe/src/app/app.component.ts      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

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 930fe1313..51d7b1f8a 100644
--- a/apps/angular/8-pure-pipe/src/app/app.component.ts
+++ b/apps/angular/8-pure-pipe/src/app/app.component.ts
@@ -1,18 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'heavyComputation',
+})
+export class HeavyComputationPipe implements PipeTransform {
+  transform(name: string, index: number) {
+    // very heavy computation
+    return `${name} - ${index}`;
+  }
+}
 
 @Component({
   selector: 'app-root',
+  imports: [HeavyComputationPipe],
   template: `
     @for (person of persons; track person) {
-      {{ heavyComputation(person, $index) }}
+      {{ person | heavyComputation: $index }}
     }
   `,
 })
 export class AppComponent {
   persons = ['toto', 'jack'];
-
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
 }