diff --git a/apps/performance/34-default-vs-onpush/src/app/app.component.ts b/apps/performance/34-default-vs-onpush/src/app/app.component.ts
index 88b0a6571..3c3f96789 100644
--- a/apps/performance/34-default-vs-onpush/src/app/app.component.ts
+++ b/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';
`,
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
girlList = randFirstName({ gender: 'female', length: 10 });
diff --git a/apps/performance/34-default-vs-onpush/src/app/list.component.ts b/apps/performance/34-default-vs-onpush/src/app/list.component.ts
new file mode 100644
index 000000000..c491d543a
--- /dev/null
+++ b/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: `
+
+ @if (names.length === 0) {
+ Empty list
+ }
+ @for (name of names; track name) {
+
+
+
+ {{ name }}
+
+
+
+ }
+ @if (names.length !== 0) {
+
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListComponent {
+
+ @Input() names!: string[];
+
+}
\ No newline at end of file
diff --git a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts b/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
index a9c9a75ae..9bd00df6a 100644
--- a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
+++ b/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: `
@@ -33,27 +35,12 @@ import { MatListModule } from '@angular/material/list';
(keydown)="handleKey($event)" />
-
- @if (names?.length === 0) {
- Empty list
- }
- @for (name of names; track name) {
-
-
-
- {{ name }}
-
-
-
- }
- @if (names?.length !== 0) {
-
- }
-
+
`,
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 = '';
}
}
diff --git a/apps/performance/34-default-vs-onpush/src/app/random.component.ts b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
index 71479e28d..f2bf4509e 100644
--- a/apps/performance/34-default-vs-onpush/src/app/random.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
@@ -1,5 +1,5 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-random',
@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
I do nothing but I'm here
`,
imports: [CDFlashingDirective],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
export class RandomComponent {}