feat(challenge33): about performance

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
+import { randFirstName } from '@ngneat/falso';
 import { PersonListComponent } from './person-list.component';
-import { Persons } from './persons';
 import { RandomComponent } from './random.component';
 
 @Component({
@@ -11,12 +11,12 @@ import { RandomComponent } from './random.component';
     <app-random />
 
     <div class="flex">
-      <app-person-list [data]="personList" title="List 1" />
-      <app-person-list [data]="person2List" title="List 2" />
+      <app-person-list [names]="girlList" title="Female" />
+      <app-person-list [names]="boyList" title="Male" />
     </div>
   `,
 })
 export class AppComponent {
-  personList = [...Persons];
-  person2List = [...Persons];
+  girlList = randFirstName({ gender: 'female', length: 10 });
+  boyList = randFirstName({ gender: 'male', length: 10 });
 }

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

@@ -1,12 +1,12 @@
 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';
-import { Person } from './person';
 
 @Component({
   selector: 'app-person-list',
@@ -18,10 +18,11 @@ import { Person } from './person';
     MatFormFieldModule,
     MatInputModule,
     MatChipsModule,
+    CDFlashingDirective,
   ],
   template: `
-    <h1 class="font-semibold text-center" title="Title">
-      {{ title }}
+    <h1 cd-flash class="font-semibold text-center" title="Title">
+      {{ title | titlecase }}
     </h1>
 
     <mat-form-field class="w-4/5">
@@ -34,18 +35,18 @@ import { Person } from './person';
     </mat-form-field>
 
     <mat-list class="flex w-full">
-      <div *ngIf="data?.length === 0" class="empty-list-label">Empty list</div>
-      <mat-list-item *ngFor="let item of data">
+      <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">
-            {{ item.label }}
+            {{ name }}
           </h3>
-          <div class="px-4 py-2 rounded-3xl bg-gray-400">
-            {{ count(item) }}
-          </div>
         </div>
       </mat-list-item>
-      <mat-divider *ngIf="data?.length !== 0"></mat-divider>
+      <mat-divider *ngIf="names?.length !== 0"></mat-divider>
     </mat-list>
   `,
   host: {
@@ -53,20 +54,15 @@ import { Person } from './person';
   },
 })
 export class PersonListComponent {
-  @Input() data: Person[] | null = null;
+  @Input() names: string[] = [];
   @Input() title = '';
 
   label = '';
 
   handleKey(event: any) {
     if (event.keyCode === 13) {
-      this.data?.unshift({ label: this.label, num: 0 });
+      this.names?.unshift(this.label);
       this.label = '';
     }
   }
-
-  count(person: Person) {
-    person.num++;
-    return person.num;
-  }
 }

apps/performance/default-onpush/src/app/person.ts

@@ -1,4 +0,0 @@
-export interface Person {
-  label: string;
-  num: number;
-}

apps/performance/default-onpush/src/app/persons.ts

@@ -1,284 +0,0 @@
-import { Person } from './person';
-
-export const Persons: Person[] = [
-  {
-    label: 'Nettle',
-    num: 0,
-  },
-  {
-    label: 'Rosalie',
-    num: 0,
-  },
-  {
-    label: 'Rhona',
-    num: 0,
-  },
-  {
-    label: 'Talyah',
-    num: 0,
-  },
-  {
-    label: 'Fancie',
-    num: 0,
-  },
-  {
-    label: 'Kari',
-    num: 0,
-  },
-  {
-    label: 'Caresa',
-    num: 0,
-  },
-  {
-    label: 'Gerta',
-    num: 0,
-  },
-  {
-    label: 'Modestine',
-    num: 0,
-  },
-  {
-    label: 'Emogene',
-    num: 0,
-  },
-  {
-    label: 'Henryetta',
-    num: 0,
-  },
-  {
-    label: 'Darelle',
-    num: 0,
-  },
-  {
-    label: 'Clementine',
-    num: 0,
-  },
-  {
-    label: 'Arabella',
-    num: 0,
-  },
-  {
-    label: 'Constance',
-    num: 0,
-  },
-  {
-    label: 'Josey',
-    num: 0,
-  },
-  {
-    label: 'Talia',
-    num: 0,
-  },
-  {
-    label: 'Loleta',
-    num: 0,
-  },
-  {
-    label: 'Tedda',
-    num: 0,
-  },
-  {
-    label: 'Francine',
-    num: 0,
-  },
-  {
-    label: 'Kittie',
-    num: 0,
-  },
-  {
-    label: 'Merry',
-    num: 0,
-  },
-  {
-    label: 'Lexi',
-    num: 0,
-  },
-  {
-    label: 'Dorie',
-    num: 0,
-  },
-  {
-    label: 'Daron',
-    num: 0,
-  },
-  {
-    label: 'Bella',
-    num: 0,
-  },
-  {
-    label: 'Ashien',
-    num: 0,
-  },
-  {
-    label: 'Hyacinthia',
-    num: 0,
-  },
-  {
-    label: 'Beatrix',
-    num: 0,
-  },
-  {
-    label: 'Tamiko',
-    num: 0,
-  },
-  {
-    label: 'Gusty',
-    num: 0,
-  },
-  {
-    label: 'Talyah',
-    num: 0,
-  },
-  {
-    label: 'Cynthy',
-    num: 0,
-  },
-  {
-    label: 'Trudy',
-    num: 0,
-  },
-  {
-    label: 'Katharine',
-    num: 0,
-  },
-  {
-    label: 'Kelci',
-    num: 0,
-  },
-  {
-    label: 'Allyce',
-    num: 0,
-  },
-  {
-    label: 'Dorthea',
-    num: 0,
-  },
-  {
-    label: 'Patty',
-    num: 0,
-  },
-  {
-    label: 'Fernandina',
-    num: 0,
-  },
-  {
-    label: 'Fanya',
-    num: 0,
-  },
-  {
-    label: 'Lauralee',
-    num: 0,
-  },
-  {
-    label: 'Nanice',
-    num: 0,
-  },
-  {
-    label: 'Maureen',
-    num: 0,
-  },
-  {
-    label: 'Wilmette',
-    num: 0,
-  },
-  {
-    label: 'Ellie',
-    num: 0,
-  },
-  {
-    label: 'Maybelle',
-    num: 0,
-  },
-  {
-    label: 'Angelina',
-    num: 0,
-  },
-  {
-    label: 'Dawn',
-    num: 0,
-  },
-  {
-    label: 'Arlene',
-    num: 0,
-  },
-  {
-    label: 'Maryanne',
-    num: 0,
-  },
-  {
-    label: 'Alyda',
-    num: 0,
-  },
-  {
-    label: 'Alisun',
-    num: 0,
-  },
-  {
-    label: 'Liana',
-    num: 0,
-  },
-  {
-    label: 'Alejandrina',
-    num: 0,
-  },
-  {
-    label: 'Costanza',
-    num: 0,
-  },
-  {
-    label: 'Wendie',
-    num: 0,
-  },
-  {
-    label: 'Rosalinda',
-    num: 0,
-  },
-  {
-    label: 'Annabela',
-    num: 0,
-  },
-  {
-    label: 'Kelsi',
-    num: 0,
-  },
-  {
-    label: 'Morgana',
-    num: 0,
-  },
-  {
-    label: 'Gabriel',
-    num: 0,
-  },
-  {
-    label: 'Cherianne',
-    num: 0,
-  },
-  {
-    label: 'Belia',
-    num: 0,
-  },
-  {
-    label: 'Jillayne',
-    num: 0,
-  },
-  {
-    label: 'Deerdre',
-    num: 0,
-  },
-  {
-    label: 'Tedra',
-    num: 0,
-  },
-  {
-    label: 'Reine',
-    num: 0,
-  },
-  {
-    label: 'Anett',
-    num: 0,
-  },
-  {
-    label: 'Donielle',
-    num: 0,
-  },
-];

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

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

apps/performance/default-onpush/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>service-worker</title>
+    <title>Default OnPush</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />