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

fix: run prettier on all file to avoid prettier issue inside PR

Browse Source
This commit is contained in:
thomas
2024-01-07 21:41:36 +01:00
parent 3bc793f6b3
commit c8b7c5d4a6
195 changed files with 575 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/angular/anchor-scrolling/src/app/app.component.ts
View File

@@ -5,6 +5,8 @@ import { RouterOutlet } from '@angular/router';
standalone: true,
imports: [RouterOutlet],
selector: 'app-root',
template: ` <router-outlet></router-outlet> `,
template: `
<router-outlet></router-outlet>
`,
})
export class AppComponent {}

2
apps/angular/anchor-scrolling/src/app/foo.component.ts
View File

@@ -7,7 +7,7 @@ import { NavButtonComponent } from './nav-button.component';
selector: 'app-foo',
template: `
Welcome to foo page
<nav-button href="home" class="fixed top-3 left-1/2">Home Page</nav-button>
<nav-button href="home" class="fixed left-1/2 top-3">Home Page</nav-button>
<div class="h-screen bg-blue-200">section 1</div>
<div class="h-screen bg-red-200">section 2</div>
`,

2
apps/angular/anchor-scrolling/src/app/home.component.ts
View File

@@ -6,7 +6,7 @@ import { NavButtonComponent } from './nav-button.component';
imports: [NavButtonComponent],
selector: 'app-home',
template: `
<nav-button href="/foo" class="fixed top-3 left-1/2">Foo Page</nav-button>
<nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
<div id="top" class="h-screen bg-gray-500">
Empty
<nav-button href="#bottom">Scroll Bottom</nav-button>

2
apps/angular/anchor-scrolling/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/anchor-scrolling/src/main.ts
View File

@@ -1,8 +1,8 @@
import { appConfig } from './app/app.config';
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)
console.error(err),
);

2
apps/angular/bug-cd/src/app/app.component.ts
View File

@@ -6,7 +6,7 @@ import { RouterOutlet } from '@angular/router';
imports: [RouterOutlet],
selector: 'app-root',
template: `
<h1 class="text-xl px-4 py-2">My Application</h1>
<h1 class="px-4 py-2 text-xl">My Application</h1>
<section class="flex">
<router-outlet name="side" />
<div class="border p-4">

4
apps/angular/bug-cd/src/app/bar.component.ts
View File

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-bar',
standalone: true,
template: ` BarComponent `,
template: `
BarComponent
`,
})
export class BarComponent {}

4
apps/angular/bug-cd/src/app/foo.component.ts
View File

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-foo',
standalone: true,
template: `Foo Component `,
template: `
Foo Component
`,
})
export class FooComponent {}

2
apps/angular/bug-cd/src/app/main-navigation.component.ts
View File

@@ -15,7 +15,7 @@ interface MenuItem {
template: `
<ng-container *ngFor="let menu of menus">
<a
class="border px-4 py-2 rounded-md"
class="rounded-md border px-4 py-2"
[routerLink]="menu.path"
routerLinkActive="isSelected">
{{ menu.name }}

2
apps/angular/bug-cd/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/bug-cd/src/main.ts
View File

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

5
apps/angular/context-outlet-type/src/app/list.component.ts
View File

@@ -17,11 +17,10 @@ import {
*ngTemplateOutlet="
listTemplateRef || emptyRef;
context: { $implicit: item, appList: item, index: i }
">
</ng-container>
"></ng-container>
</div>
<ng-template #emptyRef> No Template </ng-template>
<ng-template #emptyRef>No Template</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})

2
apps/angular/context-outlet-type/src/app/person.component.ts
View File

@@ -17,7 +17,7 @@ interface Person {
context: { $implicit: person.name, age: person.age }
"></ng-container>
<ng-template #emptyRef> No Template </ng-template>
<ng-template #emptyRef>No Template</ng-template>
`,
})
export class PersonComponent {

2
apps/angular/context-outlet-type/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/crud/src/app/app.component.ts
View File

@@ -42,7 +42,7 @@ export class AppComponent implements OnInit {
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
}
},
)
.subscribe((todoUpdated: any) => {
this.todos[todoUpdated.id - 1] = todoUpdated;

3
apps/angular/crud/src/app/app.config.ts
View File

@@ -1,6 +1,5 @@
import { ApplicationConfig } from '@angular/core';
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [importProvidersFrom(HttpClientModule)],
};

2
apps/angular/crud/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/crud/src/main.ts
View File

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

4
apps/angular/decoupling/src/app/app.component.ts
View File

@@ -6,6 +6,8 @@ import { Component } from '@angular/core';
standalone: true,
imports: [BtnDisabledDirective, BtnHelmetDirective],
selector: 'app-root',
template: ` <button btnDisabled hlm>Coucou</button> `,
template: `
<button btnDisabled hlm>Coucou</button>
`,
})
export class AppComponent {}

2
apps/angular/decoupling/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/di/src/app/app.component.ts
View File

@@ -16,7 +16,7 @@ interface ProductContext {
export class ProductDirective {
static ngTemplateContextGuard(
dir: ProductDirective,
ctx: unknown
ctx: unknown,
): ctx is ProductContext {
return true;
}

2
apps/angular/di/src/app/currency.pipe.ts
View File

@@ -11,7 +11,7 @@ export class CurrencyPipe implements PipeTransform {
transform(price: number) {
return this.currencyService.symbol$.pipe(
map((s) => `${String(price)}${s}`)
map((s) => `${String(price)}${s}`),
);
}
}

2
apps/angular/di/src/app/currency.service.ts
View File

@@ -20,7 +20,7 @@ export const currency: Currency[] = [
export class CurrencyService extends ComponentStore<{ code: string }> {
readonly code$ = this.select((state) => state.code);
readonly symbol$ = this.code$.pipe(
map((code) => currency.find((c) => c.code === code)?.symbol ?? code)
map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
);
constructor() {

2
apps/angular/di/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

10
apps/angular/injection-token/src/app/app.component.ts
View File

@@ -5,15 +5,17 @@ import { RouterLink, RouterOutlet } from '@angular/router';
standalone: true,
imports: [RouterOutlet, RouterLink],
selector: 'app-root',
template: ` <div class="flex gap-4 mb-5">
<button class="border rounded-md px-4 py-2" routerLink="video">
template: `
<div class="mb-5 flex gap-4">
<button class="rounded-md border px-4 py-2" routerLink="video">
Video
</button>
<button class="border rounded-md px-4 py-2" routerLink="phone">
<button class="rounded-md border px-4 py-2" routerLink="phone">
Phone
</button>
</div>
<router-outlet />`,
<router-outlet />
`,
host: {
class: 'p-10 flex flex-col',
},

6
apps/angular/injection-token/src/app/phone.component.ts
View File

@@ -5,10 +5,12 @@ import { TimerContainerComponent } from './timer-container.component';
selector: 'app-phone',
standalone: true,
imports: [TimerContainerComponent],
template: `<div class="flex gap-2">
template: `
<div class="flex gap-2">
Phone Call Timer:
<p class="italic">(should be 2000s)</p>
</div>
<timer-container />`,
<timer-container />
`,
})
export default class PhoneComponent {}

4
apps/angular/injection-token/src/app/timer.component.ts
View File

@@ -6,7 +6,9 @@ import { DEFAULT_TIMER } from './data';
@Component({
selector: 'timer',
standalone: true,
template: ` Timer running {{ timer() }} `,
template: `
Timer running {{ timer() }}
`,
})
export class TimerComponent {
timer = toSignal(interval(DEFAULT_TIMER));

6
apps/angular/injection-token/src/app/video.component.ts
View File

@@ -5,10 +5,12 @@ import { TimerContainerComponent } from './timer-container.component';
selector: 'app-video',
standalone: true,
imports: [TimerContainerComponent],
template: `<div class="flex gap-2">
template: `
<div class="flex gap-2">
Video Call Timer:
<p class="italic">(should be the default 1000s)</p>
</div>
<timer-container />`,
<timer-container />
`,
})
export default class VideoComponent {}

2
apps/angular/injection-token/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/injection-token/src/main.ts
View File

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

4
apps/angular/interop-rxjs-signal/src/app/app.component.ts
View File

@@ -5,7 +5,9 @@ import { RouterOutlet } from '@angular/router';
standalone: true,
imports: [RouterOutlet],
selector: 'app-root',
template: `<router-outlet />`,
template: `
<router-outlet />
`,
styles: [''],
})
export class AppComponent {}

2
apps/angular/interop-rxjs-signal/src/app/app.config.ts
View File

@@ -23,7 +23,7 @@ export const appConfig: ApplicationConfig = {
redirectTo: '',
},
],
withComponentInputBinding()
withComponentInputBinding(),
),
],
};

22
apps/angular/interop-rxjs-signal/src/app/detail/detail.component.ts
View File

@@ -9,13 +9,25 @@ import { Photo } from '../photo.model';
imports: [DatePipe, RouterLink],
template: `
<img src="{{ photo.url_m }}" alt="{{ photo.title }}" class="image" />
<p><span class="font-bold">Title:</span> {{ photo.title }}</p>
<p><span class="font-bold">Owner:</span> {{ photo.ownername }}</p>
<p><span class="font-bold">Date:</span> {{ photo.datetaken | date }}</p>
<p><span class="font-bold">Tags:</span> {{ photo.tags }}</p>
<p>
<span class="font-bold">Title:</span>
{{ photo.title }}
</p>
<p>
<span class="font-bold">Owner:</span>
{{ photo.ownername }}
</p>
<p>
<span class="font-bold">Date:</span>
{{ photo.datetaken | date }}
</p>
<p>
<span class="font-bold">Tags:</span>
{{ photo.tags }}
</p>
<button
class="border border-black rounded-md px-4 py-2 mt-10"
class="mt-10 rounded-md border border-black px-4 py-2"
routerLink="">
Back
</button>

24
apps/angular/interop-rxjs-signal/src/app/list/photos.store.ts
View File

@@ -47,7 +47,7 @@ export class PhotoStore
private readonly endOfPage$ = this.select(
this.page$,
this.pages$,
(page, pages) => page === pages
(page, pages) => page === pages,
);
readonly vm$ = this.select(
@@ -60,7 +60,7 @@ export class PhotoStore
loading: this.loading$,
error: this.error$,
},
{ debounce: true }
{ debounce: true },
);
ngrxOnStoreInit() {
@@ -82,7 +82,7 @@ export class PhotoStore
this.select({
search: this.search$,
page: this.page$,
})
}),
);
}
@@ -91,21 +91,21 @@ export class PhotoStore
...state,
search,
page: 1,
})
}),
);
readonly nextPage = this.updater(
(state): PhotoState => ({
...state,
page: state.page + 1,
})
}),
);
readonly previousPage = this.updater(
(state): PhotoState => ({
...state,
page: state.page - 1,
})
}),
);
readonly searchPhotos = this.effect<{ search: string; page: number }>(
@@ -123,13 +123,13 @@ export class PhotoStore
});
localStorage.setItem(
PHOTO_STATE_KEY,
JSON.stringify({ search, page })
JSON.stringify({ search, page }),
);
},
(error: unknown) => this.patchState({ error, loading: false })
)
)
)
)
(error: unknown) => this.patchState({ error, loading: false }),
),
),
),
),
);
}

4
apps/angular/interop-rxjs-signal/src/app/photos.service.ts
View File

@@ -16,7 +16,7 @@ export class PhotoService {
public searchPublicPhotos(
searchTerm: string,
page: number
page: number,
): Observable<FlickrAPIResponse> {
return this.http.get<FlickrAPIResponse>(
'https://www.flickr.com/services/rest/',
@@ -33,7 +33,7 @@ export class PhotoService {
extras: 'tags,date_taken,owner_name,url_q,url_m',
api_key: 'c3050d39a5bb308d9921bef0e15c437d',
},
}
},
);
}
}

2
apps/angular/interop-rxjs-signal/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/interop-rxjs-signal/src/main.ts
View File

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

12
apps/angular/module-to-standalone/src/app/app.component.ts
View File

@@ -2,24 +2,26 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: ` <div class="flex gap-2">
template: `
<div class="flex gap-2">
<button
routerLink="home"
class="border px-4 py-2 border-blue-400 rounded-md">
class="rounded-md border border-blue-400 px-4 py-2">
Home
</button>
<button
routerLink="admin"
class="border px-4 py-2 border-blue-400 rounded-md">
class="rounded-md border border-blue-400 px-4 py-2">
Admin
</button>
<button
routerLink="user"
class="border px-4 py-2 border-blue-400 rounded-md">
class="rounded-md border border-blue-400 px-4 py-2">
User
</button>
</div>
<router-outlet></router-outlet>`,
<router-outlet></router-outlet>
`,
host: {
class: 'flex flex-col p-4 gap-3',
},

2
apps/angular/module-to-standalone/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/ngfor-enhancement/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/permissions/src/app/app.component.ts
View File

@@ -5,7 +5,9 @@ import { RouterOutlet } from '@angular/router';
standalone: true,
imports: [RouterOutlet],
selector: 'app-root',
template: ` <router-outlet></router-outlet> `,
template: `
<router-outlet></router-outlet>
`,
styles: [],
})
export class AppComponent {}

4
apps/angular/permissions/src/app/button.component.ts
View File

@@ -4,7 +4,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
standalone: true,
selector: 'button[app-button]',
template: `<ng-content></ng-content>`,
template: `
<ng-content></ng-content>
`,
host: {
class: 'border border-blue-700 bg-blue-400 p-2 rounded-sm text-white',
},

2
apps/angular/permissions/src/app/routes.ts
View File

@@ -8,7 +8,7 @@ export const APP_ROUTES = [
path: 'enter',
loadComponent: () =>
import('./dashboard/admin.component').then(
(m) => m.AdminDashboardComponent
(m) => m.AdminDashboardComponent,
),
},
];

2
apps/angular/permissions/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/permissions/src/main.ts
View File

@@ -4,5 +4,5 @@ import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
console.error(err),
);

2
apps/angular/pipe-easy/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/pipe-hard/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/angular/pipe-intermediate/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

15
apps/angular/projection/src/app/component/student-card/student-card.component.ts
View File

@@ -7,10 +7,12 @@ import { CardComponent } from '../../ui/card/card.component';
@Component({
selector: 'app-student-card',
template: `<app-card
[list]="students"
[type]="cardType"
customClass="bg-light-green"></app-card>`,
template: `
<app-card
[list]="students"
[type]="cardType"
customClass="bg-light-green"></app-card>
`,
standalone: true,
styles: [
`
@@ -25,7 +27,10 @@ export class StudentCardComponent implements OnInit {
students: Student[] = [];
cardType = CardType.STUDENT;
constructor(private http: FakeHttpService, private store: StudentStore) {}
constructor(
private http: FakeHttpService,
private store: StudentStore,
) {}
ngOnInit(): void {
this.http.fetchStudents$.subscribe((s) => this.store.addAll(s));

15
apps/angular/projection/src/app/component/teacher-card/teacher-card.component.ts
View File

@@ -7,10 +7,12 @@ import { CardComponent } from '../../ui/card/card.component';
@Component({
selector: 'app-teacher-card',
template: `<app-card
[list]="teachers"
[type]="cardType"
customClass="bg-light-red"></app-card>`,
template: `
<app-card
[list]="teachers"
[type]="cardType"
customClass="bg-light-red"></app-card>
`,
styles: [
`
::ng-deep .bg-light-red {
@@ -25,7 +27,10 @@ export class TeacherCardComponent implements OnInit {
teachers: Teacher[] = [];
cardType = CardType.TEACHER;
constructor(private http: FakeHttpService, private store: TeacherStore) {}
constructor(
private http: FakeHttpService,
private store: TeacherStore,
) {}
ngOnInit(): void {
this.http.fetchTeachers$.subscribe((t) => this.store.addAll(t));

4
apps/angular/projection/src/app/ui/list-item/list-item.component.ts
View File

@@ -6,7 +6,7 @@ import { CardType } from '../../model/card.model';
@Component({
selector: 'app-list-item',
template: `
<div class="border border-grey-300 py-1 px-2 flex justify-between">
<div class="border-grey-300 flex justify-between border px-2 py-1">
{{ name }}
<button (click)="delete(id)">
<img class="h-5" src="assets/svg/trash.svg" />
@@ -22,7 +22,7 @@ export class ListItemComponent {
constructor(
private teacherStore: TeacherStore,
private studentStore: StudentStore
private studentStore: StudentStore,
) {}
delete(id: number) {

2
apps/angular/projection/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

6
apps/angular/router-input/src/app/app.component.ts
View File

@@ -6,7 +6,8 @@ import { RouterLink, RouterModule } from '@angular/router';
standalone: true,
imports: [RouterLink, RouterModule, ReactiveFormsModule],
selector: 'app-root',
template: ` <label for="userName">UserName</label>
template: `
<label for="userName">UserName</label>
<input id="userName" type="text" [formControl]="userName" />
<label for="testId">TestId</label>
<input id="testId" type="number" [formControl]="testId" />
@@ -16,7 +17,8 @@ import { RouterLink, RouterModule } from '@angular/router';
Test
</button>
<button routerLink="/">HOME</button>
<router-outlet></router-outlet>`,
<router-outlet></router-outlet>
`,
})
export class AppComponent {
userName = new FormControl();

4
apps/angular/router-input/src/app/home.component.ts
View File

@@ -3,6 +3,8 @@ import { Component } from '@angular/core';
selector: 'app-home',
standalone: true,
imports: [],
template: `<div>Home</div>`,
template: `
<div>Home</div>
`,
})
export default class HomeComponent {}

2
apps/angular/router-input/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/angular/router-input/src/main.ts
View File

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

2
apps/angular/styling/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/ngrx/effect-selector/src/app/app.component.ts
View File

@@ -2,8 +2,8 @@ import { AsyncPipe, NgFor } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
inject,
OnInit,
inject,
} from '@angular/core';
import { Store } from '@ngrx/store';
import { loadActivities } from './store/activity/activity.actions';

6
apps/ngrx/effect-selector/src/app/app.config.ts
View File

@@ -1,13 +1,13 @@
import { ApplicationConfig } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { provideStore } from '@ngrx/store';
import { ActivityEffects } from './store/activity/activity.effects';
import { UserEffects } from './store/user/user.effects';
import { StatusEffects } from './store/status/status.effects';
import {
activityFeatureKey,
activityReducer,
} from './store/activity/activity.reducer';
import { StatusEffects } from './store/status/status.effects';
import { UserEffects } from './store/user/user.effects';
import { statusFeatureKey, statusReducer } from './store/status/status.reducer';

12
apps/ngrx/effect-selector/src/app/store/activity/activity.effects.ts
View File

@@ -13,18 +13,18 @@ export class ActivityEffects {
concatMap(() =>
this.ActivityService.fetchActivities().pipe(
map((activities) =>
ActivityActions.loadActivitiesSuccess({ activities })
ActivityActions.loadActivitiesSuccess({ activities }),
),
catchError((error) =>
of(ActivityActions.loadActivitiesFailure({ error }))
)
)
)
of(ActivityActions.loadActivitiesFailure({ error })),
),
),
),
);
});
constructor(
private actions$: Actions,
private ActivityService: ActivityService
private ActivityService: ActivityService,
) {}
}

2
apps/ngrx/effect-selector/src/app/store/activity/activity.reducer.ts
View File

@@ -21,5 +21,5 @@ export const activityReducer = createReducer(
on(ActivityActions.loadActivitiesFailure, (state) => ({
state,
activities: [],
}))
})),
);

4
apps/ngrx/effect-selector/src/app/store/activity/activity.selectors.ts
View File

@@ -1,10 +1,10 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { activityFeatureKey, ActivityState } from './activity.reducer';
import { ActivityState, activityFeatureKey } from './activity.reducer';
export const selectActivityState =
createFeatureSelector<ActivityState>(activityFeatureKey);
export const selectActivities = createSelector(
selectActivityState,
(state) => state.activities
(state) => state.activities,
);

2
apps/ngrx/effect-selector/src/app/store/status/status.actions.ts
View File

@@ -5,5 +5,5 @@ export const loadStatuses = createAction('[Status] Load Statuses');
export const loadStatusesSuccess = createAction(
'[Status] Load Statuses Success',
props<{ statuses: Status[] }>()
props<{ statuses: Status[] }>(),
);

15
apps/ngrx/effect-selector/src/app/store/status/status.effects.ts
View File

@@ -22,7 +22,7 @@ export class StatusEffects {
return activities.reduce(
(status: Status[], activity): Status[] => {
const index = status.findIndex(
(s) => s.name === activity.type
(s) => s.name === activity.type,
);
if (index === -1) {
return [
@@ -34,16 +34,19 @@ export class StatusEffects {
return status;
}
},
[]
[],
);
}
return [];
}),
map((statuses) => StatusActions.loadStatusesSuccess({ statuses }))
)
)
map((statuses) => StatusActions.loadStatusesSuccess({ statuses })),
),
),
);
});
constructor(private actions$: Actions, private store: Store) {}
constructor(
private actions$: Actions,
private store: Store,
) {}
}

2
apps/ngrx/effect-selector/src/app/store/status/status.reducer.ts
View File

@@ -25,5 +25,5 @@ export const statusReducer = createReducer(
statuses,
teachersMap: map,
};
})
}),
);

6
apps/ngrx/effect-selector/src/app/store/status/status.selectors.ts
View File

@@ -1,17 +1,17 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { ActivityType } from '../activity/activity.model';
import { statusFeatureKey, StatusState } from './status.reducer';
import { StatusState, statusFeatureKey } from './status.reducer';
export const selectStatusState =
createFeatureSelector<StatusState>(statusFeatureKey);
export const selectStatuses = createSelector(
selectStatusState,
(state) => state.statuses
(state) => state.statuses,
);
export const selectAllTeachersByActivityType = (name: ActivityType) =>
createSelector(
selectStatusState,
(state) => state.teachersMap.get(name) ?? []
(state) => state.teachersMap.get(name) ?? [],
);

11
apps/ngrx/effect-selector/src/app/store/user/user.effects.ts
View File

@@ -13,11 +13,14 @@ export class UserEffects {
concatMap(() =>
this.userService.fetchUser().pipe(
map((user) => UserActions.loadUsersSuccess({ user })),
catchError((error) => of(UserActions.loadUsersFailure({ error })))
)
)
catchError((error) => of(UserActions.loadUsersFailure({ error }))),
),
),
);
});
constructor(private actions$: Actions, private userService: UserService) {}
constructor(
private actions$: Actions,
private userService: UserService,
) {}
}

2
apps/ngrx/effect-selector/src/app/store/user/user.reducer.ts
View File

@@ -15,5 +15,5 @@ export const initialState: UserState = {
export const userReducer = createReducer(
initialState,
on(UserActions.loadUsersSuccess, (state, { user }) => ({ ...state, user })),
on(UserActions.loadUsersFailure, (state) => ({ ...state, user: undefined }))
on(UserActions.loadUsersFailure, (state) => ({ ...state, user: undefined })),
);

4
apps/ngrx/effect-selector/src/app/store/user/user.selectors.ts
View File

@@ -1,9 +1,9 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { userFeatureKey, UserState } from './user.reducer';
import { UserState, userFeatureKey } from './user.reducer';
export const selectUserState = createFeatureSelector<UserState>(userFeatureKey);
export const selectUser = createSelector(
selectUserState,
(state) => state.user
(state) => state.user,
);

2
apps/ngrx/effect-selector/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

23
apps/ngrx/notification/src/app/app.config.ts
View File

@@ -1,21 +1,20 @@
import { ApplicationConfig } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { TeacherEffects } from './teacher/store/teacher.effects';
import { StudentEffects } from './student/store/student.effects';
import { provideRouter } from '@angular/router';
import { ROUTES } from './routes';
import { APP_INITIALIZER, inject } from '@angular/core';
import { FakeBackendService } from '@angular-challenges/ngrx-notification/backend';
import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideEffects } from '@ngrx/effects';
import { provideStore } from '@ngrx/store';
import { NotificationService } from './data-access/notification.service';
import {
teacherReducer,
teachersFeatureKey,
} from './teacher/store/teacher.reducer';
import { ROUTES } from './routes';
import { StudentEffects } from './student/store/student.effects';
import {
studentReducer,
studentsFeatureKey,
} from './student/store/student.reducer';
import { TeacherEffects } from './teacher/store/teacher.effects';
import {
teacherReducer,
teachersFeatureKey,
} from './teacher/store/teacher.reducer';
const REDUCERS = {
[teachersFeatureKey]: teacherReducer,

4
apps/ngrx/notification/src/app/data-access/notification.service.ts
View File

@@ -22,12 +22,12 @@ export class NotificationService {
.subscribe((notification: Push) => {
if (isTeacher(notification)) {
this.store.dispatch(
teacherActions.addOneTeacher({ teacher: notification })
teacherActions.addOneTeacher({ teacher: notification }),
);
}
if (isStudent(notification)) {
this.store.dispatch(
studentActions.addOneStudent({ student: notification })
studentActions.addOneStudent({ student: notification }),
);
}
if (isSchool(notification)) {

10
apps/ngrx/notification/src/app/school/school.store.ts
View File

@@ -35,11 +35,11 @@ export class SchoolStore
this.httpService.getAllSchools().pipe(
tapResponse(
(schools) => this.patchState({ schools }),
(_) => _
)
)
)
)
(_) => _,
),
),
),
),
);
ngrxOnStoreInit() {

6
apps/ngrx/notification/src/app/student/store/student.effects.ts
View File

@@ -16,8 +16,8 @@ export class StudentEffects {
switchMap(() =>
this.httpService
.getAllStudents()
.pipe(map((students) => studentActions.addAllStudents({ students })))
)
)
.pipe(map((students) => studentActions.addAllStudents({ students }))),
),
),
);
}

6
apps/ngrx/notification/src/app/student/store/student.reducer.ts
View File

@@ -13,11 +13,11 @@ export const studentAdapter: EntityAdapter<Student> =
export const studentReducer = createReducer(
studentAdapter.getInitialState(),
on(studentActions.addOneStudent, (state, { student }) =>
studentAdapter.upsertOne(student, state)
studentAdapter.upsertOne(student, state),
),
on(studentActions.addAllStudents, (state, { students }) =>
studentAdapter.setAll(students, state)
)
studentAdapter.setAll(students, state),
),
);
export const { selectIds, selectEntities, selectAll, selectTotal } =

2
apps/ngrx/notification/src/app/student/store/student.selectors.ts
View File

@@ -1,8 +1,8 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import {
StudentState,
studentAdapter,
studentsFeatureKey,
StudentState,
} from './student.reducer';
const selectStudentState =

6
apps/ngrx/notification/src/app/teacher/store/teacher.effects.ts
View File

@@ -16,8 +16,8 @@ export class TeacherEffects {
switchMap(() =>
this.httpService
.getAllTeachers()
.pipe(map((teachers) => teacherActions.addAllTeachers({ teachers })))
)
)
.pipe(map((teachers) => teacherActions.addAllTeachers({ teachers }))),
),
),
);
}

6
apps/ngrx/notification/src/app/teacher/store/teacher.reducer.ts
View File

@@ -13,11 +13,11 @@ export const teacherAdapter: EntityAdapter<Teacher> =
export const teacherReducer = createReducer(
teacherAdapter.getInitialState(),
on(teacherActions.addOneTeacher, (state, { teacher }) =>
teacherAdapter.upsertOne(teacher, state)
teacherAdapter.upsertOne(teacher, state),
),
on(teacherActions.addAllTeachers, (state, { teachers }) =>
teacherAdapter.setAll(teachers, state)
)
teacherAdapter.setAll(teachers, state),
),
);
export const { selectIds, selectEntities, selectAll, selectTotal } =

2
apps/ngrx/notification/src/app/teacher/store/teacher.selectors.ts
View File

@@ -1,8 +1,8 @@
import { createFeatureSelector, createSelector } from '@ngrx/store';
import {
TeacherState,
teacherAdapter,
teachersFeatureKey,
TeacherState,
} from './teacher.reducer';
const selectTeacherState =

2
apps/ngrx/notification/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

2
apps/ngrx/notification/src/main.ts
View File

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

4
apps/performance/christmas-web-worker/src/app/unknown-person/unknown-person.component.css
View File

@@ -147,7 +147,9 @@ body {
position: absolute;
top: 40px;
left: 40px;
box-shadow: 38px 0 #0078ca, 19px 20px #f69697;
box-shadow:
38px 0 #0078ca,
19px 20px #f69697;
}
.eyes:before {
height: 12px;

2
apps/performance/christmas-web-worker/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

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

@@ -21,7 +21,7 @@ import { MatListModule } from '@angular/material/list';
CDFlashingDirective,
],
template: `
<h1 cd-flash class="font-semibold text-center" title="Title">
<h1 cd-flash class="text-center font-semibold" title="Title">
{{ title | titlecase }}
</h1>

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

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

2
apps/performance/default-onpush/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/performance/default-onpush/src/main.ts
View File

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

2
apps/performance/memoized/src/app/app.component.ts
View File

@@ -11,7 +11,7 @@ import { PersonListComponent } from './person-list.component';
<p>Performance is key!!</p>
<button
(click)="loadList = true"
class="border border-black p-2 rounded-md">
class="rounded-md border border-black p-2">
Load List
</button>

4
apps/performance/memoized/src/app/person-list.component.ts
View File

@@ -27,7 +27,7 @@ const fibonacci = (num: number): number => {
MatChipsModule,
],
template: `
<h1 class="font-semibold text-center" title="Title">
<h1 class="text-center font-semibold" title="Title">
{{ title | titlecase }}
</h1>
@@ -43,7 +43,7 @@ const fibonacci = (num: number): number => {
<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>
<mat-chip>{{ calculate(person.fib) }}</mat-chip>
</div>
</mat-list-item>
</mat-list>

2
apps/performance/memoized/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/performance/memoized/src/main.ts
View File

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

4
apps/performance/ngfor-biglist/src/app/app.component.ts
View File

@@ -21,13 +21,13 @@ import { PersonListComponent } from './person-list.component';
template: `
<button
(click)="loadList.set(true)"
class="border border-black p-2 rounded-md">
class="rounded-md border border-black p-2">
Load List
</button>
<app-person-list
*ngIf="loadList()"
class="max-w-2xl w-3/4"
class="w-3/4 max-w-2xl"
[persons]="persons()" />
`,
host: {

4
apps/performance/ngfor-biglist/src/app/list.service.ts
View File

@@ -16,7 +16,7 @@ export class PersonService {
this.persons.set(
this.fakeBackend
.returnNewList(this.persons())
.filter((p) => p.email !== email)
.filter((p) => p.email !== email),
);
}
@@ -24,7 +24,7 @@ export class PersonService {
this.persons.set(
this.fakeBackend
.returnNewList(this.persons())
.map((p) => (p.email === email ? { email, name: randFirstName() } : p))
.map((p) => (p.email === email ? { email, name: randFirstName() } : p)),
);
}

4
apps/performance/ngfor-biglist/src/app/person-list.component.ts
View File

@@ -9,11 +9,11 @@ import { Person } from './person.model';
standalone: true,
imports: [CommonModule, NgForTrackByModule],
template: `
<div class="h-[300px] relative overflow-hidden">
<div class="relative h-[300px] overflow-hidden">
<div class="absolute inset-0 overflow-scroll">
<div
*ngFor="let person of persons; trackByProp: 'email'"
class="flex justify-between items-center border-b h-9">
class="flex h-9 items-center justify-between border-b">
<h3>{{ person.name }}</h3>
<p>{{ person.email }}</p>
</div>

2
apps/performance/ngfor-biglist/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

4
apps/performance/ngfor-biglist/src/main.ts
View File

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

4
apps/performance/ngfor-optimize/src/app/app.component.ts
View File

@@ -16,7 +16,7 @@ import { PersonListComponent } from './person-list.component';
providers: [PersonService],
selector: 'app-root',
template: `
<h1 class="font-semibold text-center text-3xl" title="Title">
<h1 class="text-center text-3xl font-semibold" title="Title">
List of Persons
</h1>
@@ -30,7 +30,7 @@ import { PersonListComponent } from './person-list.component';
</mat-form-field>
<app-person-list
class="max-w-2xl w-3/4"
class="w-3/4 max-w-2xl"
[persons]="persons()"
(delete)="personService.deletePerson($event)"
(update)="personService.updatePerson($event)" />

4
apps/performance/ngfor-optimize/src/app/list.service.ts
View File

@@ -16,7 +16,7 @@ export class PersonService {
this.persons.set(
this.fakeBackend
.returnNewList(this.persons())
.filter((p) => p.email !== email)
.filter((p) => p.email !== email),
);
}
@@ -24,7 +24,7 @@ export class PersonService {
this.persons.set(
this.fakeBackend
.returnNewList(this.persons())
.map((p) => (p.email === email ? { email, name: randFirstName() } : p))
.map((p) => (p.email === email ? { email, name: randFirstName() } : p)),
);
}

6
apps/performance/ngfor-optimize/src/app/person-list.component.ts
View File

@@ -10,16 +10,16 @@ import { Person } from './person.model';
template: `
<div
*ngFor="let person of persons"
class="flex justify-between items-center border-b">
class="flex items-center justify-between border-b">
<h3>{{ person.name }}</h3>
<div class="flex gap-10 py-1">
<button
class="border rounded-md p-2 bg-blue-500 text-white"
class="rounded-md border bg-blue-500 p-2 text-white"
(click)="update.emit(person.email)">
UPDATE
</button>
<button
class="border rounded-md p-2 bg-red-500 text-white"
class="rounded-md border bg-red-500 p-2 text-white"
(click)="delete.emit(person.email)">
DELETE
</button>

2
apps/performance/ngfor-optimize/src/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />

Some files were not shown because too many files have changed in this diff Show More