Answer:35

apps/performance/35-memoization/src/app/app.component.ts

@@ -1,10 +1,9 @@
-import { NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 import { generateList } from './generateList';
 import { PersonListComponent } from './person-list.component';
 
 @Component({
-  imports: [PersonListComponent, NgIf],
+  imports: [PersonListComponent],
   selector: 'app-root',
   template: `
     <p>Performance is key!!</p>
@@ -14,11 +13,9 @@ import { PersonListComponent } from './person-list.component';
       Load List
     </button>
 
-    <app-person-list
-      *ngIf="loadList"
-      class="max-w-2xl"
-      [persons]="persons"
-      title="Persons" />
+    @if (loadList) {
+      <app-person-list class="max-w-2xl" [persons]="persons" title="Persons" />
+    }
   `,
 })
 export class AppComponent {

apps/performance/35-memoization/src/app/app.config.ts

@@ -1,6 +1,5 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideAnimations()],
+  providers: [],
 };

apps/performance/35-memoization/src/app/fibonacci.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'fibonacci',
+})
+export class FibonacciPipe implements PipeTransform {
+  transform(num: number): number {
+    return fibonacci(num);
+  }
+}
+
+const fibonacci = (num: number): number => {
+  if (num === 1 || num === 2) {
+    return 1;
+  }
+  return fibonacci(num - 1) + fibonacci(num - 2);
+};

apps/performance/35-memoization/src/app/person-list.component.ts

@@ -1,29 +1,24 @@
 import { Component, Input } from '@angular/core';
 
-import { CommonModule } from '@angular/common';
+import { TitleCasePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
+import { FibonacciPipe } from './fibonacci.pipe';
 import { Person } from './person.model';
 
-const fibonacci = (num: number): number => {
-  if (num === 1 || num === 2) {
-    return 1;
-  }
-  return fibonacci(num - 1) + fibonacci(num - 2);
-};
-
 @Component({
   selector: 'app-person-list',
   imports: [
-    CommonModule,
+    TitleCasePipe,
     FormsModule,
     MatListModule,
     MatFormFieldModule,
     MatInputModule,
     MatChipsModule,
+    FibonacciPipe,
   ],
   template: `
     <h1 class="text-center font-semibold" title="Title">
@@ -39,12 +34,14 @@ const fibonacci = (num: number): number => {
     </mat-form-field>
 
     <mat-list class="flex w-full">
-      <mat-list-item *ngFor="let person of persons">
-        <div MatListItemLine class="flex justify-between">
-          <h3>{{ person.name }}</h3>
-          <mat-chip>{{ calculate(person.fib) }}</mat-chip>
-        </div>
-      </mat-list-item>
+      @for (person of persons; track $index) {
+        <mat-list-item>
+          <div MatListItemLine class="flex justify-between">
+            <h3>{{ person.name }}</h3>
+            <mat-chip>{{ person.fib | fibonacci }}</mat-chip>
+          </div>
+        </mat-list-item>
+      }
     </mat-list>
   `,
   host: {
@@ -56,8 +53,4 @@ export class PersonListComponent {
   @Input() title = '';
 
   label = '';
-
-  calculate(num: number) {
-    return fibonacci(num);
-  }
 }