Answer:34 default vs onpush

apps/performance/34-default-vs-onpush/src/app/app.component.ts

@@ -1,21 +1,17 @@
 import { Component } from '@angular/core';
-import { randFirstName } from '@ngneat/falso';
-import { PersonListComponent } from './person-list.component';
+import { PersonComponent } from './person.component';
 import { RandomComponent } from './random.component';
 
 @Component({
-  imports: [PersonListComponent, RandomComponent],
+  imports: [RandomComponent, PersonComponent],
   selector: 'app-root',
   template: `
     <app-random />
 
     <div class="flex">
-      <app-person-list [names]="girlList" title="Female" />
-      <app-person-list [names]="boyList" title="Male" />
+      <app-person gender="female" title="Female"></app-person>
+      <app-person gender="male" title="Male"></app-person>
     </div>
   `,
 })
-export class AppComponent {
-  girlList = randFirstName({ gender: 'female', length: 10 });
-  boyList = randFirstName({ gender: 'male', length: 10 });
-}
+export class AppComponent {}

apps/performance/34-default-vs-onpush/src/app/person-list.component.ts

@@ -1,7 +1,6 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { TitleCasePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -17,24 +16,10 @@ import { MatListModule } from '@angular/material/list';
     MatInputModule,
     MatChipsModule,
     CDFlashingDirective,
-    TitleCasePipe,
   ],
   template: `
-    <h1 class="text-center font-semibold" title="Title">
-      {{ title() | titlecase }}
-    </h1>
-
-    <mat-form-field class="w-4/5" cd-flash>
-      <input
-        placeholder="Add one member to the list"
-        matInput
-        type="text"
-        [(ngModel)]="label"
-        (keydown)="handleKey($event)" />
-    </mat-form-field>
-
     <mat-list class="flex w-full">
-      @if (names()?.length === 0) {
+      @if (names().length === 0) {
         <div class="empty-list-label">Empty list</div>
       }
       @for (name of names(); track name) {
@@ -46,25 +31,16 @@ import { MatListModule } from '@angular/material/list';
           </div>
         </mat-list-item>
       }
-      @if (names()?.length !== 0) {
+      @if (names().length !== 0) {
         <mat-divider></mat-divider>
       }
     </mat-list>
   `,
   host: {
     class: 'w-full flex flex-col items-center',
   },
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PersonListComponent {
   names = input<string[]>([]);
-  title = input('');
-
-  label = '';
-
-  handleKey(event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-      this.names()?.unshift(this.label);
-      this.label = '';
-    }
-  }
 }

apps/performance/34-default-vs-onpush/src/app/person.component.ts

@@ -0,0 +1,36 @@
+import { TitleCasePipe } from '@angular/common';
+import { Component, inject, input, OnInit } from '@angular/core';
+import { PersonListComponent } from './person-list.component';
+import { PersonFormComponent } from './person.form.component';
+import { PersonService } from './person.service';
+
+@Component({
+  selector: 'app-person',
+  imports: [TitleCasePipe, PersonListComponent, PersonFormComponent],
+  template: `
+    <h1 class="text-center font-semibold" title="Title">
+      {{ title() | titlecase }}
+    </h1>
+
+    <person-form (addLabel)="onAddLabel($event)" />
+    <app-person-list [names]="names()" />
+  `,
+  host: {
+    class: 'w-full flex flex-col items-center',
+  },
+  providers: [PersonService],
+})
+export class PersonComponent implements OnInit {
+  service = inject(PersonService);
+  title = input('');
+  gender = input<'male' | 'female'>('male');
+  names = this.service.list;
+
+  ngOnInit(): void {
+    this.service.initList(this.gender());
+  }
+
+  onAddLabel(label: string) {
+    this.service.add(label);
+  }
+}

apps/performance/34-default-vs-onpush/src/app/person.form.component.ts

@@ -0,0 +1,40 @@
+import { CDFlashingDirective } from '@angular-challenges/shared/directives';
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'person-form',
+  imports: [
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    CDFlashingDirective,
+  ],
+  template: `
+    <mat-form-field class="w-4/5" cd-flash>
+      <input
+        placeholder="Add one member to the list"
+        matInput
+        type="text"
+        [(ngModel)]="label"
+        (keydown)="handleKey($event)" />
+    </mat-form-field>
+  `,
+  host: {
+    class: 'w-full flex flex-col items-center',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PersonFormComponent {
+  label = '';
+  addLabel = output<string>();
+
+  handleKey(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.addLabel.emit(this.label);
+      this.label = '';
+    }
+  }
+}

apps/performance/34-default-vs-onpush/src/app/person.service.ts

@@ -0,0 +1,20 @@
+import { Injectable, signal } from '@angular/core';
+import { randFirstName } from '@ngneat/falso';
+
+@Injectable()
+export class PersonService {
+  private _list = signal<string[]>([]);
+  list = this._list.asReadonly();
+
+  initList(gender: 'male' | 'female') {
+    if (gender === 'male') {
+      this._list.set(randFirstName({ gender: 'male', length: 10 }));
+    } else {
+      this._list.set(randFirstName({ gender: 'female', length: 10 }));
+    }
+  }
+
+  add(name: string) {
+    this._list.update((names) => [...names, name]);
+  }
+}

apps/performance/34-default-vs-onpush/src/app/random.component.ts

@@ -1,11 +1,12 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-random',
   template: `
     <div cd-flash>I do nothing but I'm here</div>
   `,
   imports: [CDFlashingDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RandomComponent {}