refactor: move libs

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

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { randFirstName } from '@ngneat/falso';
+import { PersonListComponent } from './person-list.component';
+import { RandomComponent } from './random.component';
+
+@Component({
+  standalone: true,
+  imports: [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" />
+    </div>
+  `,
+})
+export class AppComponent {
+  girlList = randFirstName({ gender: 'female', length: 10 });
+  boyList = randFirstName({ gender: 'male', length: 10 });
+}

apps/performance/34-default-vs-onpush/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/34-default-vs-onpush/src/app/person-list.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input } from '@angular/core';
+
+import { CDFlashingDirective } from '@angular-challenges/shared/directives';
+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';
+
+@Component({
+  selector: 'app-person-list',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatListModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatChipsModule,
+    CDFlashingDirective,
+  ],
+  template: `
+    <h1 cd-flash 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">
+      <div *ngIf="names?.length === 0" class="empty-list-label">Empty list</div>
+      <mat-list-item
+        *ngFor="let name of names"
+        cd-flash
+        class="text-orange-500">
+        <div MatListItemLine class="flex justify-between">
+          <h3 title="Name">
+            {{ name }}
+          </h3>
+        </div>
+      </mat-list-item>
+      <mat-divider *ngIf="names?.length !== 0"></mat-divider>
+    </mat-list>
+  `,
+  host: {
+    class: 'w-full flex flex-col items-center',
+  },
+})
+export class PersonListComponent {
+  @Input() names: string[] = [];
+  @Input() title = '';
+
+  label = '';
+
+  handleKey(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.names?.unshift(this.label);
+      this.label = '';
+    }
+  }
+}

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

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