Answer:8 easy pipe solution

apps/angular/pipe-easy/src/app/app.component.ts

@@ -1,21 +1,17 @@
 import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { HeavyComputationPipe } from './shared/HeavyComputation.pipe';
 
 @Component({
  standalone: true,
- imports: [NgFor],
  selector: 'app-root',
  template: `
  <div *ngFor="let person of persons; let index = index">
- {{ heavyComputation(person, index) }}
+ {{ person | heavy: index }}
  </div>
  `,
+ imports: [NgFor, HeavyComputationPipe],
 })
 export class AppComponent {
  persons = ['toto', 'jack'];
-
- heavyComputation(name: string, index: number) {
- // very heavy computation
- return `${name} - ${index}`;
- }
 }

apps/angular/pipe-easy/src/app/shared/HeavyComputation.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'heavy',
+ standalone: true,
+})
+export class HeavyComputationPipe implements PipeTransform {
+ transform(name: string, index: number): string {
+ return `${name} - ${index}`;
+ }
+}