feat(challenge 35): add challenge 35 about memoization

apps/performance/memoized/src/app/app.component.ts

@@ -0,0 +1,28 @@
+import { NgIf } from '@angular/common';
+import { Component } from '@angular/core';
+import { generateList } from './generateList';
+import { PersonListComponent } from './person-list.component';
+
+@Component({
+  standalone: true,
+  imports: [PersonListComponent, NgIf],
+  selector: 'app-root',
+  template: `
+    <p>Performance is key!!</p>
+    <button
+      (click)="loadList = true"
+      class="border border-black p-2 rounded-md">
+      Load List
+    </button>
+
+    <app-person-list
+      *ngIf="loadList"
+      class="max-w-2xl"
+      [persons]="persons"
+      title="Persons" />
+  `,
+})
+export class AppComponent {
+  persons = generateList();
+  loadList = false;
+}

apps/performance/memoized/src/app/app.config.ts

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

apps/performance/memoized/src/app/generateList.ts

@@ -0,0 +1,15 @@
+import { randFirstName, randNumber } from '@ngneat/falso';
+import { Person } from './person.model';
+
+export function generateList() {
+  const arr: Person[] = [];
+
+  for (let i = 0; i < 100; i++) {
+    arr.push({
+      name: randFirstName(),
+      fib: randNumber({ min: 25, max: 30, precision: 1 }),
+    });
+  }
+
+  return arr;
+}

apps/performance/memoized/src/app/person-list.component.ts

@@ -0,0 +1,64 @@
+import { Component, Input } from '@angular/core';
+
+import { CommonModule } 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 { 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',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatListModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatChipsModule,
+  ],
+  template: `
+    <h1 class="font-semibold text-center" title="Title">
+      {{ title | titlecase }}
+    </h1>
+
+    <mat-form-field class="w-4/5">
+      <input
+        placeholder="Add one member to the list"
+        matInput
+        type="text"
+        [(ngModel)]="label" />
+    </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>
+    </mat-list>
+  `,
+  host: {
+    class: 'w-full flex flex-col items-center',
+  },
+})
+export class PersonListComponent {
+  @Input() persons: Person[] = [];
+  @Input() title = '';
+
+  label = '';
+
+  calculate(num: number) {
+    return fibonacci(num);
+  }
+}

apps/performance/memoized/src/app/person.model.ts

@@ -0,0 +1,4 @@
+export interface Person {
+  name: string;
+  fib: number;
+}