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(challenge 35): add challenge 35 about memoization

Browse Source
This commit is contained in:
thomas
2023-09-16 21:57:12 +02:00
parent c8fd152923
commit ea7eee2d4a
17 changed files with 355 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/performance/memoized/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,28 @@
import { NgIf } from '@angular/common';
import { Component } from '@angular/core';
import { generateList } from './generateList';
import { PersonListComponent } from './person-list.component';
@Component({
standalone: true,
imports: [PersonListComponent, NgIf],
selector: 'app-root',
template: `
<p>Performance is key!!</p>
<button
(click)="loadList = true"
class="border border-black p-2 rounded-md">
Load List
</button>
<app-person-list
*ngIf="loadList"
class="max-w-2xl"
[persons]="persons"
title="Persons" />
`,
})
export class AppComponent {
persons = generateList();
loadList = false;
}

6
apps/performance/memoized/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()],
};

15
apps/performance/memoized/src/app/generateList.ts Normal file
View File

@@ -0,0 +1,15 @@
import { randFirstName, randNumber } from '@ngneat/falso';
import { Person } from './person.model';
export function generateList() {
const arr: Person[] = [];
for (let i = 0; i < 100; i++) {
arr.push({
name: randFirstName(),
fib: randNumber({ min: 25, max: 30, precision: 1 }),
});
}
return arr;
}

64
apps/performance/memoized/src/app/person-list.component.ts Normal file
View File

@@ -0,0 +1,64 @@
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.model';
const fibonacci = (num: number): number => {
if (num === 1 || num === 2) {
return 1;
}
return fibonacci(num - 1) + fibonacci(num - 2);
};
@Component({
selector: 'app-person-list',
standalone: true,
imports: [
CommonModule,
FormsModule,
MatListModule,
MatFormFieldModule,
MatInputModule,
MatChipsModule,
],
template: `
<h1 class="font-semibold text-center" title="Title">
{{ title | titlecase }}
</h1>
<mat-form-field class="w-4/5">
<input
placeholder="Add one member to the list"
matInput
type="text"
[(ngModel)]="label" />
</mat-form-field>
<mat-list class="flex w-full">
<mat-list-item *ngFor="let person of persons">
<div MatListItemLine class="flex justify-between">
<h3>{{ person.name }}</h3>
<mat-chip> {{ calculate(person.fib) }} </mat-chip>
</div>
</mat-list-item>
</mat-list>
`,
host: {
class: 'w-full flex flex-col items-center',
},
})
export class PersonListComponent {
@Input() persons: Person[] = [];
@Input() title = '';
label = '';
calculate(num: number) {
return fibonacci(num);
}
}

4
apps/performance/memoized/src/app/person.model.ts Normal file
View File

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

0
apps/performance/memoized/src/assets/.gitkeep Normal file
View File

BIN
apps/performance/memoized/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/performance/memoized/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>performance-memoized</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/performance/memoized/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

5
apps/performance/memoized/src/styles.scss Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */