Answer:34

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { randFirstName } from '@ngneat/falso';
 import { PersonListComponent } from './person-list.component';
 import { RandomComponent } from './random.component';
@@ -14,6 +14,7 @@ import { RandomComponent } from './random.component';
       <app-person-list [names]="boyList" title="Male" />
     </div>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
   girlList = randFirstName({ gender: 'female', length: 10 });

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

@@ -0,0 +1,38 @@
+import { CDFlashingDirective } from "@angular-challenges/shared/directives";
+import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
+import { MatDivider, MatList, MatListItem } from "@angular/material/list";
+
+
+@Component({
+    selector: 'list-component',
+    imports: [
+        MatList,
+        MatListItem,
+        MatDivider,
+        CDFlashingDirective
+    ],
+    template: `
+        <mat-list class="flex w-full">
+            @if (names.length === 0) {
+                <div class="empty-list-label">Empty list</div>
+            }
+            @for (name of names; track name) {
+                <mat-list-item cd-flash class="text-orange-500">
+                <div class="flex justify-between">
+                    <h3 title="Name">
+                    {{ name }}
+                    </h3>
+                </div>
+                </mat-list-item>
+            }
+            @if (names.length !== 0) {
+                <mat-divider></mat-divider>
+            }
+        </mat-list>`,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListComponent {
+
+    @Input() names!: string[];
+
+}

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

@@ -1,4 +1,4 @@
-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';
@@ -7,6 +7,7 @@ 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 { ListComponent } from './list.component';
 
 @Component({
   selector: 'app-person-list',
@@ -18,6 +19,7 @@ import { MatListModule } from '@angular/material/list';
     MatChipsModule,
     CDFlashingDirective,
     TitleCasePipe,
+    ListComponent
   ],
   template: `
     <h1 cd-flash class="text-center font-semibold" title="Title">
@@ -33,27 +35,12 @@ import { MatListModule } from '@angular/material/list';
         (keydown)="handleKey($event)" />
     </mat-form-field>
 
-    <mat-list class="flex w-full">
-      @if (names?.length === 0) {
-        <div class="empty-list-label">Empty list</div>
-      }
-      @for (name of names; track name) {
-        <mat-list-item cd-flash class="text-orange-500">
-          <div class="flex justify-between">
-            <h3 title="Name">
-              {{ name }}
-            </h3>
-          </div>
-        </mat-list-item>
-      }
-      @if (names?.length !== 0) {
-        <mat-divider></mat-divider>
-      }
-    </mat-list>
+    <list-component [names]="names">
   `,
   host: {
     class: 'w-full flex flex-col items-center',
   },
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PersonListComponent {
   @Input() names: string[] = [];
@@ -63,7 +50,7 @@ export class PersonListComponent {
 
   handleKey(event: KeyboardEvent) {
     if (event.key === 'Enter') {
-      this.names?.unshift(this.label);
+      this.names = [this.label, ...this.names]
       this.label = '';
     }
   }

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 {}