- {{ teacher.firstname }} {{ teacher.lastname }} - {{ teacher.version }}
-
- `,
- styles: [
- `
- :host {
- display: block;
- width: fit-content;
- height: fit-content;
- border: 1px solid red;
- padding: 4px;
- }
- `,
- ],
-})
-export class TeacherComponent {
- teacher$ = this.store.select(TeacherSelectors.selectTeachers);
-
- constructor(private store: Store) {}
-}
diff --git a/apps/ngrx/7-power-of-effect/src/assets/.gitkeep b/apps/ngrx/7-power-of-effect/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/ngrx/7-power-of-effect/src/polyfills.ts b/apps/ngrx/7-power-of-effect/src/polyfills.ts
deleted file mode 100644
index e4555ed11..000000000
--- a/apps/ngrx/7-power-of-effect/src/polyfills.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
- * file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- * (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/apps/ngrx/7-power-of-effect/tsconfig.app.json b/apps/ngrx/7-power-of-effect/tsconfig.app.json
deleted file mode 100644
index 7a4dbc47e..000000000
--- a/apps/ngrx/7-power-of-effect/tsconfig.app.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "../../../dist/out-tsc",
- "types": [],
- "target": "ES2022",
- "useDefineForClassFields": false
- },
- "files": ["src/main.ts", "src/polyfills.ts"],
- "include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts"]
-}
diff --git a/apps/ngrx/7-power-of-effect/tsconfig.editor.json b/apps/ngrx/7-power-of-effect/tsconfig.editor.json
deleted file mode 100644
index db1c0128c..000000000
--- a/apps/ngrx/7-power-of-effect/tsconfig.editor.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "include": [
- "**/*.ts",
- "../../../libs/power-of-effect/backend/src/lib/fake-backend.service.ts"
- ],
- "compilerOptions": {
- "types": []
- }
-}
diff --git a/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts b/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts
index 9c5bd67d4..59be617e8 100644
--- a/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts
+++ b/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts
@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
- standalone: true,
imports: [UserComponent, RouterOutlet],
selector: 'app-root',
template: `
diff --git a/apps/performance/12-optimize-change-detection/src/app/app.component.ts b/apps/performance/12-optimize-change-detection/src/app/app.component.ts
index e75ef991e..dd818cad5 100644
--- a/apps/performance/12-optimize-change-detection/src/app/app.component.ts
+++ b/apps/performance/12-optimize-change-detection/src/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component, HostListener } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
- standalone: true,
imports: [NgIf, AsyncPipe],
selector: 'app-root',
template: `
diff --git a/apps/performance/34-default-vs-onpush/src/app/app.component.ts b/apps/performance/34-default-vs-onpush/src/app/app.component.ts
index 1eab3c839..88b0a6571 100644
--- a/apps/performance/34-default-vs-onpush/src/app/app.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { PersonListComponent } from './person-list.component';
import { RandomComponent } from './random.component';
@Component({
- standalone: true,
imports: [PersonListComponent, RandomComponent],
selector: 'app-root',
template: `
diff --git a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts b/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
index 04574d5c1..4cd92396a 100644
--- a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
@@ -10,7 +10,6 @@ import { MatListModule } from '@angular/material/list';
@Component({
selector: 'app-person-list',
- standalone: true,
imports: [
CommonModule,
FormsModule,
diff --git a/apps/performance/34-default-vs-onpush/src/app/random.component.ts b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
index d46cdd053..71479e28d 100644
--- a/apps/performance/34-default-vs-onpush/src/app/random.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-random',
- standalone: true,
template: `
diff --git a/apps/performance/40-web-workers/src/app/app.component.ts b/apps/performance/40-web-workers/src/app/app.component.ts
index 6b9846b13..583572ed2 100644
--- a/apps/performance/40-web-workers/src/app/app.component.ts
+++ b/apps/performance/40-web-workers/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { HeavyCalculationService } from './heavy-calculation.service';
import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
@Component({
- standalone: true,
imports: [CommonModule, UnknownPersonComponent],
providers: [HeavyCalculationService],
selector: 'app-root',
diff --git a/apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts b/apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts
index f22b16749..fb80fb2b6 100644
--- a/apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts
+++ b/apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts
@@ -1,48 +1,44 @@
/* eslint-disable @angular-eslint/component-selector */
-import { AsyncPipe, NgFor } from '@angular/common';
-import { Component, Input, inject } from '@angular/core';
-import { BehaviorSubject, take } from 'rxjs';
+import { Component, inject, input, signal } from '@angular/core';
+import { take } from 'rxjs';
import { AppService } from './app.service';
import { TopicType } from './localDB.service';
@Component({
- standalone: true,
selector: 'button-delete-topic',
- imports: [AsyncPipe],
template: `
-
-
{{ message$$ | async }}
+
+
{{ message() }}
`,
})
export class ButtonDeleteComponent {
- @Input() topic!: TopicType;
+ readonly topic = input.required
();
- message$$ = new BehaviorSubject('');
+ message = signal('');
private service = inject(AppService);
deleteTopic() {
this.service
- .deleteOldTopics(this.topic)
+ .deleteOldTopics(this.topic())
.pipe(take(1))
.subscribe((result) =>
- this.message$$.next(
+ this.message.set(
result
- ? `All ${this.topic} have been deleted`
- : `Error: deletion of some ${this.topic} failed`,
+ ? `All ${this.topic()} have been deleted`
+ : `Error: deletion of some ${this.topic()} failed`,
),
);
}
}
@Component({
- standalone: true,
- imports: [AsyncPipe, NgFor, ButtonDeleteComponent],
+ imports: [ButtonDeleteComponent],
selector: 'app-root',
template: `
-
- {{ item.id }} - {{ item.topic }}
-
+ @for (info of allInfo(); track info.id) {
+ {{ info.id }} - {{ info.topic }}
+ }
Delete Food
Delete Sport
@@ -52,5 +48,5 @@ export class ButtonDeleteComponent {
export class AppComponent {
private service = inject(AppService);
- all$ = this.service.getAll$;
+ allInfo = this.service.getAllInfo;
}
diff --git a/apps/rxjs/11-high-order-operator-bug/src/app/app.service.ts b/apps/rxjs/11-high-order-operator-bug/src/app/app.service.ts
index 7c8173514..df2269a89 100644
--- a/apps/rxjs/11-high-order-operator-bug/src/app/app.service.ts
+++ b/apps/rxjs/11-high-order-operator-bug/src/app/app.service.ts
@@ -1,23 +1,19 @@
import { inject, Injectable } from '@angular/core';
-import { merge, mergeMap, Observable, of, take } from 'rxjs';
+import { merge, Observable, of } from 'rxjs';
import { LocalDBService, TopicType } from './localDB.service';
@Injectable({ providedIn: 'root' })
export class AppService {
private dbService = inject(LocalDBService);
- getAll$ = this.dbService.infos$;
+ getAllInfo = this.dbService.infos;
deleteOldTopics(type: TopicType): Observable {
- return this.dbService.searchByType(type).pipe(
- take(1),
- mergeMap((topicToDelete) =>
- topicToDelete.length > 0
- ? topicToDelete
- .map((t) => this.dbService.deleteOneTopic(t.id))
- .reduce((acc, curr) => merge(acc, curr), of(true))
- : of(true),
- ),
- );
+ const infoByType = this.dbService.searchByType(type);
+ return infoByType.length > 0
+ ? infoByType
+ .map((t) => this.dbService.deleteOneTopic(t.id))
+ .reduce((acc, curr) => merge(acc, curr), of(true))
+ : of(true);
}
}
diff --git a/apps/rxjs/11-high-order-operator-bug/src/app/localDB.service.ts b/apps/rxjs/11-high-order-operator-bug/src/app/localDB.service.ts
index d13d0ed9c..5a035e087 100644
--- a/apps/rxjs/11-high-order-operator-bug/src/app/localDB.service.ts
+++ b/apps/rxjs/11-high-order-operator-bug/src/app/localDB.service.ts
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/member-ordering */
import { randomError } from '@angular-challenges/shared/utils';
-import { Injectable } from '@angular/core';
-import { ComponentStore } from '@ngrx/component-store';
+import { computed, Injectable, signal } from '@angular/core';
import { of } from 'rxjs';
export type TopicType = 'food' | 'book' | 'sport';
@@ -31,21 +30,17 @@ const initialState: DBState = {
};
@Injectable({ providedIn: 'root' })
-export class LocalDBService extends ComponentStore {
- constructor() {
- super(initialState);
- }
+export class LocalDBService {
+ private state = signal(initialState);
- infos$ = this.select((state) => state.infos);
+ infos = computed(() => this.state().infos);
searchByType = (type: TopicType) =>
- this.select((state) => state.infos.filter((i) => i.topic === type));
+ this.infos().filter((i) => i.topic === type);
- deleteOne = this.updater(
- (state, id: number): DBState => ({
- infos: state.infos.filter((i) => i.id !== id),
- }),
- );
+ deleteOne = (id: number) => {
+ this.state.set({ infos: this.state().infos.filter((i) => i.id !== id) });
+ };
deleteOneTopic = (id: number) =>
randomError({
diff --git a/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts b/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts
index d63ed4ada..e01a69a01 100644
--- a/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts
+++ b/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts
@@ -18,7 +18,6 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
diff --git a/apps/signal/43-signal-input/src/app/user.component.ts b/apps/signal/43-signal-input/src/app/user.component.ts
index 082638bf6..908f952c3 100644
--- a/apps/signal/43-signal-input/src/app/user.component.ts
+++ b/apps/signal/43-signal-input/src/app/user.component.ts
@@ -16,7 +16,6 @@ const ageToCategory = (age: number): Category => {
@Component({
selector: 'app-user',
- standalone: true,
imports: [TitleCasePipe],
template: `
{{ fullName | titlecase }} plays tennis in the {{ category }} category!!
diff --git a/apps/signal/50-bug-in-effect/src/app/app.component.ts b/apps/signal/50-bug-in-effect/src/app/app.component.ts
index 80861ed45..ec6ba09b0 100644
--- a/apps/signal/50-bug-in-effect/src/app/app.component.ts
+++ b/apps/signal/50-bug-in-effect/src/app/app.component.ts
@@ -7,7 +7,6 @@ import {
import { FormsModule } from '@angular/forms';
@Component({
- standalone: true,
imports: [FormsModule],
selector: 'app-root',
template: `
diff --git a/apps/signal/51-function-call-effect/src/app/action.component.ts b/apps/signal/51-function-call-effect/src/app/action.component.ts
index bbdc8245f..22e0e7a4f 100644
--- a/apps/signal/51-function-call-effect/src/app/action.component.ts
+++ b/apps/signal/51-function-call-effect/src/app/action.component.ts
@@ -9,7 +9,6 @@ import { FormsModule } from '@angular/forms';
import { UserService } from './user.service';
@Component({
- standalone: true,
imports: [FormsModule],
selector: 'app-actions',
template: `
diff --git a/apps/signal/51-function-call-effect/src/app/app.component.ts b/apps/signal/51-function-call-effect/src/app/app.component.ts
index 69fd23fca..5f9342eda 100644
--- a/apps/signal/51-function-call-effect/src/app/app.component.ts
+++ b/apps/signal/51-function-call-effect/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { ActionsComponent } from './action.component';
import { UserService } from './user.service';
@Component({
- standalone: true,
imports: [FormsModule, ActionsComponent],
selector: 'app-root',
template: `
diff --git a/apps/signal/53-big-signal-performance/src/app/address.component.ts b/apps/signal/53-big-signal-performance/src/app/address.component.ts
index ade14dd53..f894d697e 100644
--- a/apps/signal/53-big-signal-performance/src/app/address.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/address.component.ts
@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
@Component({
selector: 'address-user',
- standalone: true,
template: `
Address:
diff --git a/apps/signal/53-big-signal-performance/src/app/app.component.ts b/apps/signal/53-big-signal-performance/src/app/app.component.ts
index 0d185d2b2..bf15a5dc2 100644
--- a/apps/signal/53-big-signal-performance/src/app/app.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/app.component.ts
@@ -6,7 +6,6 @@ import { NoteComponent } from './note.component';
import { UserFormComponent } from './user-form.component';
@Component({
- standalone: true,
selector: 'app-root',
template: `
diff --git a/apps/signal/53-big-signal-performance/src/app/job.component.ts b/apps/signal/53-big-signal-performance/src/app/job.component.ts
index c6710a058..d3186fc9f 100644
--- a/apps/signal/53-big-signal-performance/src/app/job.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/job.component.ts
@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
@Component({
selector: 'job',
- standalone: true,
template: `
Job:
diff --git a/apps/signal/53-big-signal-performance/src/app/name.component.ts b/apps/signal/53-big-signal-performance/src/app/name.component.ts
index 5317c8e2a..f93b5675a 100644
--- a/apps/signal/53-big-signal-performance/src/app/name.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/name.component.ts
@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
@Component({
selector: 'name',
- standalone: true,
template: `
Name: {{ userService.user().name }}
diff --git a/apps/signal/53-big-signal-performance/src/app/note.component.ts b/apps/signal/53-big-signal-performance/src/app/note.component.ts
index 11e8ffe05..dd0033962 100644
--- a/apps/signal/53-big-signal-performance/src/app/note.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/note.component.ts
@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
@Component({
selector: 'note',
- standalone: true,
template: `
Note: {{ userService.user().note }}
diff --git a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
index 75526447e..d0f2164ce 100644
--- a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
+++ b/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
@Component({
selector: 'user-form',
- standalone: true,
imports: [ReactiveFormsModule],
template: `
- 
+ [class]="customClass()">
+ @if (type() === CardType.TEACHER) {
+