vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-12 05:43:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(challenge34): default vs onpush perfoamnce serie

Browse Source
This commit is contained in:
thomas
2023-09-07 16:32:27 +02:00
parent 5f84762e41
commit 323c38e334
21 changed files with 670 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/performance/default-onpush/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,22 @@
import { Component } from '@angular/core';
import { PersonListComponent } from './person-list.component';
import { Persons } from './persons';
import { RandomComponent } from './random.component';
@Component({
standalone: true,
imports: [PersonListComponent, RandomComponent],
selector: 'app-root',
template: `
<app-random />
<div class="flex">
<app-person-list [data]="personList" title="List 1" />
<app-person-list [data]="person2List" title="List 2" />
</div>
`,
})
export class AppComponent {
personList = [...Persons];
person2List = [...Persons];
}

6
apps/performance/default-onpush/src/app/app.config.ts Normal file
View File

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

72
apps/performance/default-onpush/src/app/person-list.component.ts Normal file
View File

@@ -0,0 +1,72 @@
import { Component, Input } from '@angular/core';
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',
standalone: true,
imports: [
CommonModule,
FormsModule,
MatListModule,
MatFormFieldModule,
MatInputModule,
MatChipsModule,
],
template: `
<h1 class="font-semibold text-center" title="Title">
{{ title }}
</h1>
<mat-form-field class="w-4/5">
<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="data?.length === 0" class="empty-list-label">Empty list</div>
<mat-list-item *ngFor="let item of data">
<div MatListItemLine class="flex justify-between">
<h3 title="Name">
{{ item.label }}
</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-list>
`,
host: {
class: 'w-full flex flex-col items-center',
},
})
export class PersonListComponent {
@Input() data: Person[] | null = null;
@Input() title = '';
label = '';
handleKey(event: any) {
if (event.keyCode === 13) {
this.data?.unshift({ label: this.label, num: 0 });
this.label = '';
}
}
count(person: Person) {
person.num++;
return person.num;
}
}

4
apps/performance/default-onpush/src/app/person.ts Normal file
View File

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

284
apps/performance/default-onpush/src/app/persons.ts Normal file
View File

@@ -0,0 +1,284 @@
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,
},
];

13
apps/performance/default-onpush/src/app/random.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-random',
standalone: true,
template: `I do nothing but I'm here: {{ count() }}`,
})
export class RandomComponent {
counter = 0;
count() {
return this.counter++;
}
}