Answer:34

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

@@ -1,21 +1,46 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { randFirstName } from '@ngneat/falso';
-import { PersonListComponent } from './person-list.component';
-import { RandomComponent } from './random.component';
+import { BehaviorSubject } from 'rxjs';
+import { RandomComponent } from './components/random.component';
+import { PersonListComponent } from './container/person-list.component';
 
 @Component({
-  imports: [PersonListComponent, RandomComponent],
+  imports: [AsyncPipe, PersonListComponent, RandomComponent],
   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-list
+        [names]="girlList$ | async"
+        title="Female"
+        (newName)="addName($event)" />
+      <app-person-list
+        [names]="boyList$ | async"
+        title="Male"
+        (newName)="addName($event)" />
     </div>
   `,
 })
 export class AppComponent {
-  girlList = randFirstName({ gender: 'female', length: 10 });
-  boyList = randFirstName({ gender: 'male', length: 10 });
+  private girlListSubject = new BehaviorSubject<string[]>(
+    randFirstName({ gender: 'female', length: 10 }),
+  );
+  private boyListSubject = new BehaviorSubject<string[]>(
+    randFirstName({ gender: 'male', length: 10 }),
+  );
+
+  girlList$ = this.girlListSubject.asObservable();
+  boyList$ = this.boyListSubject.asObservable();
+
+  addName({ title, name }: { title: string; name: string }) {
+    if (title === 'Female') {
+      const current = this.girlListSubject.value;
+      this.girlListSubject.next([name, ...current]);
+    } else {
+      const current = this.boyListSubject.value;
+      this.boyListSubject.next([name, ...current]);
+    }
+  }
 }

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

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

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

@@ -0,0 +1,21 @@
+import { CDFlashingDirective } from '@angular-challenges/shared/directives';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatListModule } from '@angular/material/list';
+
+@Component({
+  selector: 'app-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatListModule, CDFlashingDirective],
+  template: `
+    <mat-list-item cd-flash class="text-orange-500">
+      <div MatListItemLine class="flex justify-between">
+        <h3 title="Name">
+          {{ name }}
+        </h3>
+      </div>
+    </mat-list-item>
+  `,
+})
+export class ListComponent {
+  @Input() name!: string;
+}

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

@@ -1,8 +1,9 @@
 import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-random',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div cd-flash>I do nothing but I'm here</div>
   `,

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

@@ -0,0 +1,37 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Output,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'app-search',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatFormFieldModule, MatInputModule, FormsModule],
+  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>
+  `,
+})
+export class SearchComponent {
+  @Output() newName = new EventEmitter<string>();
+
+  label = '';
+
+  handleKey(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.newName.emit(this.label);
+      this.label = '';
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+import { CDFlashingDirective } from '@angular-challenges/shared/directives';
+import { TitleCasePipe } from '@angular/common';
+import { MatListModule } from '@angular/material/list';
+import { ListComponent } from '../components/list.component';
+import { SearchComponent } from '../components/search.component';
+
+@Component({
+  selector: 'app-person-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TitleCasePipe,
+    MatListModule,
+    CDFlashingDirective,
+    SearchComponent,
+    ListComponent,
+  ],
+  template: `
+    <h1 cd-flash class="text-center font-semibold" title="Title">
+      {{ title | titlecase }}
+    </h1>
+
+    <app-search (newName)="handleNewName($event)" />
+
+    <mat-list class="flex w-full">
+      @if (names?.length === 0) {
+        <div class="empty-list-label">Empty list</div>
+      }
+      @for (name of names; track $index) {
+        <app-list [name]="name" />
+      }
+      @if (names?.length !== 0) {
+        <mat-divider />
+      }
+    </mat-list>
+  `,
+  host: {
+    class: 'w-full flex flex-col items-center',
+  },
+})
+export class PersonListComponent {
+  @Input() names!: ReadonlyArray<string> | null;
+  @Input() title!: string;
+
+  @Output() newName = new EventEmitter<{ title: string; name: string }>();
+
+  handleNewName(name: string) {
+    this.newName.emit({ title: this.title, name });
+  }
+}