-
My Application
-
-
- -
-
-
-
-
- `,
- styles: [''],
-})
-export class AppComponent {
- readonly posts = [
- {
- title: 'A Deep Dive into Angular',
- description:
- "Explore Angular's core features, its evolution, and best practices in development for creating dynamic, efficient web applications in our comprehensive guide.",
- pictureLink:
- 'https://images.unsplash.com/photo-1471958680802-1345a694ba6d',
- },
- {
- title: 'The Perfect Combination',
- description:
- 'Unveil the power of combining Angular & React in web development, maximizing efficiency and flexibility for building scalable, sophisticated applications.',
- pictureLink:
- 'https://images.unsplash.com/photo-1518717202715-9fa9d099f58a',
- },
- {
- title: 'Taking Angular to the Next Level',
- description:
- "Discover how integrating React with Angular elevates web development, blending Angular's structure with React's UI prowess for advanced applications.",
- pictureLink:
- 'https://images.unsplash.com/photo-1532103050105-860af53bc6aa',
- },
- ];
-
- readonly selectedPost = signal
- @for (post of posts; track post.title) {
-
-
-
- }
-
- Selected Post:
-
- {{ selectedPost()?.title ?? '-' }}
-
-
-
-
- );
-}
diff --git a/apps/angular/45-react-in-angular/src/app/react/post.component.ts b/apps/angular/45-react-in-angular/src/app/react/post.component.ts
deleted file mode 100644
index d5eb2cedf..000000000
--- a/apps/angular/45-react-in-angular/src/app/react/post.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, EventEmitter, input, Output } from '@angular/core';
-
-type Post = { title: string; description: string; pictureLink: string };
-
-@Component({
- selector: 'app-post',
- template: `
-
- `,
- styles: [''],
-})
-export class PostComponent {
- post = input
- 
-
-
-
- {props.title}
- {props.description}
- -Delete file
-Card 1
- Message 1
- Card 2
- Message 2
-
-
- }
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- host: {
- class: 'p-4 border border-grey rounded-sm flex flex-col w-[200px]',
- },
-})
-export class CardComponent {
- small = input
-
-
-
-
-
-
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- host: {
- class: 'flex flex-col gap-2 ',
- },
-})
-export class ExpandableCard {
- public isExpanded = signal(false);
-}
diff --git a/apps/angular/59-content-projection-defer/src/app/page-1.ts b/apps/angular/59-content-projection-defer/src/app/page-1.ts
deleted file mode 100644
index 868d76959..000000000
--- a/apps/angular/59-content-projection-defer/src/app/page-1.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
- selector: 'app-page-1',
- template: `
- page1
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class Page1 {}
diff --git a/apps/angular/59-content-projection-defer/src/app/page-2.ts b/apps/angular/59-content-projection-defer/src/app/page-2.ts
deleted file mode 100644
index 5665466d8..000000000
--- a/apps/angular/59-content-projection-defer/src/app/page-2.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { httpResource } from '@angular/common/http';
-import {
- ChangeDetectionStrategy,
- Component,
- ResourceStatus,
-} from '@angular/core';
-import { ExpandableCard } from './expandable-card';
-
-interface Post {
- id: number;
- title: string;
- body: string;
- userId: number;
-}
-
-@Component({
- selector: 'app-page-2',
- template: `
- page2
- Load Post
-
- @if (postResource.isLoading()) {
- Loading...
- } @else if (postResource.status() === ResourceStatus.Error) {
- Error...
- } @else {
- @for (post of postResource.value(); track post.id) {
-
- {{ post.title }}
- }
- }
-
-
- `,
- host: {
- class: 'w-full flex flex-col',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PersonListComponent {
- persons = input
- @for (person of persons(); track person.email) {
-
-
-
- }
- {{ person.name }}
-{{ person.email }}
-Progress: {{ loadingPercentage() }}%
- `,
- host: {
- class: `flex flex-col h-screen w-screen bg-[#1f75c0]`,
- },
-})
-export class AppComponent {
- private heavyCalculationService = inject(HeavyCalculationService);
-
- readonly loadingPercentage = this.heavyCalculationService.loadingPercentage;
-
- discover() {
- this.heavyCalculationService.startLoading();
- }
-}
diff --git a/apps/performance/40-web-workers/src/app/heavy-calculation.service.ts b/apps/performance/40-web-workers/src/app/heavy-calculation.service.ts
deleted file mode 100644
index 06dedd1a6..000000000
--- a/apps/performance/40-web-workers/src/app/heavy-calculation.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Injectable, computed, signal } from '@angular/core';
-
-@Injectable()
-export class HeavyCalculationService {
- private finalLength = 664579;
- private loadingLength = signal(0);
-
- loadingPercentage = computed(
- () => (this.loadingLength() * 100) / this.finalLength,
- );
-
- startLoading() {
- this.randomHeavyCalculationFunction();
- }
-
- private randomHeavyCalculationFunction() {
- for (let num = 2; num <= 10000000; num++) {
- let randomFlag = true;
- for (let i = 2; i <= Math.sqrt(num); i++) {
- if (num % i === 0) {
- randomFlag = false;
- break;
- }
- }
- if (randomFlag) {
- this.loadingLength.update((l) => l + 1);
- }
- }
- }
-}
diff --git a/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.css b/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.css
deleted file mode 100644
index edc1f75ad..000000000
--- a/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.css
+++ /dev/null
@@ -1,225 +0,0 @@
-*,
-*:before,
-*:after {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
-}
-body {
- background-color: #fff2c8;
-}
-.container {
- width: 380px;
- height: 500px;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
-}
-.container *:before,
-.container *:after {
- position: absolute;
- content: '';
-}
-.santa {
- height: 220px;
- width: 200px;
- background-color: #e84701;
- border-radius: 80px;
- position: absolute;
- left: 115px;
- top: 200px;
-}
-.santa:before,
-.santa:after {
- width: 40px;
- margin: auto;
- left: 0;
- right: 0;
- background-color: #fff2c8;
-}
-.santa:before {
- height: 130px;
-}
-.santa:after {
- height: 40px;
- bottom: -15px;
-}
-.hand-l {
- background-color: #e84701;
- height: 90px;
- width: 105px;
- position: absolute;
- right: -30px;
- top: 20px;
- border-radius: 0 80px 0 0;
-}
-.hand-l:before {
- margin: auto;
- width: 35px;
- height: 15px;
- background-color: #ffffff;
- top: 85px;
- left: 71px;
-}
-.hand-l:after {
- height: 15px;
- width: 30px;
- background-color: #fad2af;
- left: 74px;
- top: 101px;
- border-radius: 0 0 30px 30px;
-}
-.hand-r {
- height: 150px;
- width: 180px;
- border: 30px solid transparent;
- border-bottom: 40px solid #e84701;
- position: absolute;
- left: -100px;
- bottom: 150px;
- border-radius: 50%;
- animation: wave 1.5s infinite;
- transform-origin: right;
-}
-@keyframes wave {
- 50% {
- transform: rotate(15deg);
- }
-}
-.hand-r:before {
- width: 35px;
- height: 15px;
- background-color: #ffffff;
- transform: rotate(-50deg);
- top: 68px;
- left: -22px;
-}
-.hand-r:after {
- width: 30px;
- height: 15px;
- background-color: #fad2af;
- transform: rotate(-50deg);
- left: -31px;
- top: 58px;
- border-radius: 15px 15px 0 0;
-}
-.face {
- position: absolute;
- margin: auto;
- height: 180px;
- width: 180px;
- background-color: #fad2af;
- border: 25px solid #f2e6da;
- border-radius: 50%;
- left: 0;
- right: 0;
- bottom: 140px;
-}
-.beard {
- position: absolute;
- height: 90px;
- width: 180px;
- background-color: #ffffff;
- border-radius: 0 0 90px 90px;
- right: -25px;
- bottom: -25px;
-}
-.beard:before {
- width: 55px;
- height: 25px;
- background-color: #f2e6da;
- border-radius: 20px 0;
- left: 34px;
-}
-.beard:after {
- height: 25px;
- width: 55px;
- background-color: #f2e6da;
- border-radius: 0 20px;
- right: 34px;
-}
-.eyes {
- height: 12px;
- width: 12px;
- background-color: #0078ca;
- border-radius: 50%;
- position: absolute;
- top: 40px;
- left: 40px;
- box-shadow:
- 38px 0 #0078ca,
- 19px 20px #f69697;
-}
-.eyes:before {
- height: 12px;
- width: 25px;
- background-color: #ffffff;
- border-radius: 10px 0;
- left: -10px;
- bottom: 20px;
-}
-.eyes:after {
- height: 12px;
- width: 25px;
- background-color: #ffffff;
- border-radius: 0 10px;
- left: 32px;
- bottom: 20px;
-}
-.hat {
- position: absolute;
- height: 60px;
- width: 120px;
- background-color: #e84701;
- top: -98px;
- left: 85px;
- border-radius: 0 0 60px 60px;
-}
-.hat:before {
- height: 40px;
- width: 40px;
- background-color: #ffffff;
- left: 100px;
- top: -15px;
- border-radius: 50%;
-}
-.belt {
- position: absolute;
- width: 100%;
- height: 30px;
- background-color: #000000;
- top: 100px;
-}
-.belt:before {
- height: 100%;
- width: 40px;
- border: 7px solid #ffdc2e;
- margin: auto;
- left: 0;
- right: 0;
-}
-.belt:after {
- height: 5px;
- width: 15px;
- background-color: #ffdc2e;
- left: 100px;
- top: 12px;
-}
-.shoe {
- height: 20px;
- width: 20px;
- background-color: #000000;
- position: absolute;
- top: 220px;
- left: 60px;
- border-radius: 20px 0 0 0;
-}
-.shoe:before {
- height: 20px;
- width: 20px;
- background-color: #000000;
- top: 0;
- left: 60px;
- border-radius: 0 20px 0 0;
-}
diff --git a/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.ts b/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.ts
deleted file mode 100644
index 5a0d4bd96..000000000
--- a/apps/performance/40-web-workers/src/app/unknown-person/unknown-person.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, input } from '@angular/core';
-
-@Component({
- selector: 'unknown-person',
- template: `
-
- @if (step() !== 100) {
-
-
- Who is here?
-
- }
- Happy Christmas !!!
-
-
- `,
- styleUrls: [`unknown-person.component.css`],
-})
-export class UnknownPersonComponent {
- step = input.required
-
-
-
-
-
-
-
-
-
-
- - Title: - {{ photo.title }} -
-- Owner: - {{ photo.ownername }} -
-- Date: - {{ photo.datetaken | date }} -
-- Tags: - {{ photo.tags }} -
- - - `, - host: { - class: 'p-5 block', - }, -}) -export default class DetailComponent { - @RouterInput({ - required: true, - transform: (value: string) => JSON.parse(decodeURIComponent(value)), - }) - photo!: Photo; -} diff --git a/apps/signal/30-interop-rxjs-signal/src/app/list/photos.component.ts b/apps/signal/30-interop-rxjs-signal/src/app/list/photos.component.ts deleted file mode 100644 index 7ba115027..000000000 --- a/apps/signal/30-interop-rxjs-signal/src/app/list/photos.component.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { AsyncPipe } from '@angular/common'; -import { Component, inject, OnInit } from '@angular/core'; -import { FormControl, ReactiveFormsModule } from '@angular/forms'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import { MatProgressBarModule } from '@angular/material/progress-bar'; -import { RouterLinkWithHref } from '@angular/router'; -import { provideComponentStore } from '@ngrx/component-store'; -import { - debounceTime, - distinctUntilChanged, - Observable, - skipWhile, - tap, -} from 'rxjs'; -import { Photo } from '../photo.model'; -import { PhotoStore } from './photos.store'; - -@Component({ - selector: 'app-photos', - imports: [ - ReactiveFormsModule, - MatFormFieldModule, - MatProgressBarModule, - MatInputModule, - RouterLinkWithHref, - AsyncPipe, - ], - template: ` -Photos
- --
- @for (
- photo of vm.photos;
- track photo.id;
- let i = $index
- ) {
-
-
-
-
- -
- }
-
No Photos found. Type a search word.
- }
-
-
- Address:
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CDFlashingDirective],
-})
-export class AddressComponent {
- userService = inject(UserStore);
-}
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
deleted file mode 100644
index bf15a5dc2..000000000
--- a/apps/signal/53-big-signal-performance/src/app/app.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-import { AddressComponent } from './address.component';
-import { JobComponent } from './job.component';
-import { NameComponent } from './name.component';
-import { NoteComponent } from './note.component';
-import { UserFormComponent } from './user-form.component';
-
-@Component({
- selector: 'app-root',
- template: `
- Street: {{ userService.user().address.street }}
- ZipCode: {{ userService.user().address.zipCode }}
- City: {{ userService.user().address.city }}
-
- Job:
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CDFlashingDirective],
-})
-export class JobComponent {
- userService = inject(UserStore);
-}
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
deleted file mode 100644
index f93b5675a..000000000
--- a/apps/signal/53-big-signal-performance/src/app/name.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { UserStore } from './user.service';
-
-@Component({
- selector: 'name',
- template: `
- title: {{ userService.user().title }}
- salary: {{ userService.user().salary }}
-
- Name: {{ userService.user().name }}
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CDFlashingDirective],
-})
-export class NameComponent {
- userService = inject(UserStore);
-}
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
deleted file mode 100644
index dd0033962..000000000
--- a/apps/signal/53-big-signal-performance/src/app/note.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { UserStore } from './user.service';
-
-@Component({
- selector: 'note',
- template: `
-
- Note: {{ userService.user().note }}
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CDFlashingDirective],
-})
-export class NoteComponent {
- userService = inject(UserStore);
-}
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
deleted file mode 100644
index d0f2164ce..000000000
--- a/apps/signal/53-big-signal-performance/src/app/user-form.component.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { UserStore } from './user.service';
-
-@Component({
- selector: 'user-form',
- imports: [ReactiveFormsModule],
- template: `
-
- `,
- host: {
- class: 'block border border-gray-500 p-4 pt-10 m-4',
- },
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UserFormComponent {
- userStore = inject(UserStore);
-
- form = new FormGroup({
- name: new FormControl(this.userStore.user().name, { nonNullable: true }),
- street: new FormControl(this.userStore.user().address.street, {
- nonNullable: true,
- }),
- zipCode: new FormControl(this.userStore.user().address.zipCode, {
- nonNullable: true,
- }),
- city: new FormControl(this.userStore.user().address.city, {
- nonNullable: true,
- }),
- note: new FormControl(this.userStore.user().note, { nonNullable: true }),
- title: new FormControl(this.userStore.user().title, { nonNullable: true }),
- salary: new FormControl(this.userStore.user().salary, {
- nonNullable: true,
- }),
- });
-
- submit() {
- this.userStore.user.update((u) => ({
- ...u,
- name: this.form.getRawValue().name,
- address: {
- ...u.address,
- street: this.form.getRawValue().street,
- zipCode: this.form.getRawValue().zipCode,
- city: this.form.getRawValue().city,
- },
- note: this.form.getRawValue().note,
- title: this.form.getRawValue().title,
- salary: this.form.getRawValue().salary,
- }));
- }
-}
diff --git a/apps/signal/53-big-signal-performance/src/app/user.service.ts b/apps/signal/53-big-signal-performance/src/app/user.service.ts
deleted file mode 100644
index 4b3b7c512..000000000
--- a/apps/signal/53-big-signal-performance/src/app/user.service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class UserStore {
- user = signal({
- name: 'Bob',
- address: {
- street: '',
- zipCode: '',
- city: '',
- },
- note: '',
- title: '',
- salary: 0,
- });
-}
diff --git a/apps/signal/53-big-signal-performance/src/assets/.gitkeep b/apps/signal/53-big-signal-performance/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/signal/53-big-signal-performance/src/favicon.ico b/apps/signal/53-big-signal-performance/src/favicon.ico
deleted file mode 100644
index 317ebcb23..000000000
Binary files a/apps/signal/53-big-signal-performance/src/favicon.ico and /dev/null differ
diff --git a/apps/signal/53-big-signal-performance/src/index.html b/apps/signal/53-big-signal-performance/src/index.html
deleted file mode 100644
index 3f038cc7a..000000000
--- a/apps/signal/53-big-signal-performance/src/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- Library
- - - -No book found for this search
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export default class ShelfComponent {}
diff --git a/apps/testing/17-router/src/app/search.component.ts b/apps/testing/17-router/src/app/search.component.ts
deleted file mode 100644
index b35db308c..000000000
--- a/apps/testing/17-router/src/app/search.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { availableBooks } from './book.model';
-
-@Component({
- imports: [ReactiveFormsModule, RouterLink, RouterLinkActive],
- styles: [
- `
- :host {
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
-
- .error {
- color: red;
- }
-
- button {
- width: 300px;
- padding: 5px;
- border-radius: 5px;
- }
-
- .search label {
- margin-right: 15px;
- }
- `,
- ],
- template: `
-
-
-
- @if (searchBook.errors) {
-
-
- Search criteria is required!
- }
-
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export default class SearchComponent {
- searchBook = new FormControl('', Validators.required);
- books = availableBooks;
-}
diff --git a/apps/testing/17-router/src/app/shelf.component.ts b/apps/testing/17-router/src/app/shelf.component.ts
deleted file mode 100644
index 238d9836c..000000000
--- a/apps/testing/17-router/src/app/shelf.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { map } from 'rxjs';
-import { availableBooks } from './book.model';
-
-@Component({
- selector: 'app-shelf',
- imports: [AsyncPipe],
- template: `
- List of books available:
--
- @for (book of books; track $index) {
-
- {{ book.name }} by {{ book.author }} - } -
-
- @for (book of books | async; track book) {
-
- Borrowed Book: {{ book.name }} by {{ book.author }} - } -
Title is {{ title() }}
- `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ResultComponent { - title = input(''); -} - -@Component({ - selector: 'app-button', - template: ` - - `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ButtonComponent { - validate = output(); -} - -@Component({ - selector: 'app-error', - template: ` -Title is required !!!
- `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ErrorComponent {} - -@Component({ - selector: 'app-child', - imports: [], - template: ` -Counter: {{ counter() }}
- - - - `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class CounterComponent { - initialValue = input.required{{ result$ | async }}
- `,
-})
-export class AppComponent {
- private modal = inject(MatDialog);
- private result = new BehaviorSubjectError
-
- You must enter a
- name
- first!!
-
-
-
-
- `,
-})
-export class ErrorDialog {}
diff --git a/apps/testing/20-modal/src/app/profil-confirmation.dialog.ts b/apps/testing/20-modal/src/app/profil-confirmation.dialog.ts
deleted file mode 100644
index e77211e24..000000000
--- a/apps/testing/20-modal/src/app/profil-confirmation.dialog.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable @angular-eslint/component-class-suffix */
-import { Component, inject } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-
-@Component({
- imports: [MatButtonModule, MatDialogModule],
- template: `
- Profil
-Name: {{ data.name }}
-
-
-
-
- `,
-})
-export class ProfilConfirmationDialog {
- data = inject(MAT_DIALOG_DATA);
-}
diff --git a/apps/testing/20-modal/src/assets/.gitkeep b/apps/testing/20-modal/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/testing/20-modal/src/favicon.ico b/apps/testing/20-modal/src/favicon.ico
deleted file mode 100644
index 317ebcb23..000000000
Binary files a/apps/testing/20-modal/src/favicon.ico and /dev/null differ
diff --git a/apps/testing/20-modal/src/main.ts b/apps/testing/20-modal/src/main.ts
deleted file mode 100644
index 7961924bf..000000000
--- a/apps/testing/20-modal/src/main.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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),
-);
diff --git a/apps/testing/20-modal/src/styles.scss b/apps/testing/20-modal/src/styles.scss
deleted file mode 100644
index 77e408aa8..000000000
--- a/apps/testing/20-modal/src/styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* You can add global styles to this file, and also import other style files */
diff --git a/apps/testing/20-modal/src/test-setup.ts b/apps/testing/20-modal/src/test-setup.ts
deleted file mode 100644
index 15de72a3c..000000000
--- a/apps/testing/20-modal/src/test-setup.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-import 'jest-preset-angular/setup-jest';
diff --git a/apps/testing/20-modal/tailwind.config.js b/apps/testing/20-modal/tailwind.config.js
deleted file mode 100644
index 38183db2c..000000000
--- a/apps/testing/20-modal/tailwind.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
-const { join } = require('path');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: [
- join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
- ...createGlobPatternsForDependencies(__dirname),
- ],
- theme: {
- extend: {},
- },
- plugins: [],
-};
diff --git a/apps/testing/20-modal/tsconfig.app.json b/apps/testing/20-modal/tsconfig.app.json
deleted file mode 100644
index 5fdad8685..000000000
--- a/apps/testing/20-modal/tsconfig.app.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "../../../dist/out-tsc",
- "types": [],
- "moduleResolution": "bundler"
- },
- "files": ["src/main.ts"],
- "include": ["src/**/*.d.ts"],
- "exclude": [
- "jest.config.ts",
- "src/**/*.test.ts",
- "src/**/*.spec.ts",
- "cypress/**/*",
- "cypress.config.ts",
- "**/*.cy.ts",
- "**/*.cy.js",
- "**/*.cy.tsx",
- "**/*.cy.jsx"
- ]
-}
diff --git a/apps/testing/20-modal/tsconfig.editor.json b/apps/testing/20-modal/tsconfig.editor.json
deleted file mode 100644
index 8ae117d96..000000000
--- a/apps/testing/20-modal/tsconfig.editor.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "include": ["src/**/*.ts"],
- "compilerOptions": {
- "types": ["jest", "node"]
- }
-}
diff --git a/apps/testing/20-modal/tsconfig.json b/apps/testing/20-modal/tsconfig.json
deleted file mode 100644
index 3879b94cd..000000000
--- a/apps/testing/20-modal/tsconfig.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
- "compilerOptions": {
- "target": "es2022",
- "useDefineForClassFields": false,
- "forceConsistentCasingInFileNames": true,
- "strict": true,
- "noImplicitOverride": true,
- "noPropertyAccessFromIndexSignature": true,
- "noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true
- },
- "files": [],
- "include": [],
- "references": [
- {
- "path": "./tsconfig.app.json"
- },
- {
- "path": "./tsconfig.spec.json"
- },
- {
- "path": "./tsconfig.editor.json"
- },
- {
- "path": "./cypress/tsconfig.json"
- }
- ],
- "extends": "../../../tsconfig.base.json",
- "angularCompilerOptions": {
- "enableI18nLegacyMessageIdFormat": false,
- "strictInjectionParameters": true,
- "strictInputAccessModifiers": true,
- "strictTemplates": true
- }
-}
diff --git a/apps/testing/20-modal/tsconfig.spec.json b/apps/testing/20-modal/tsconfig.spec.json
deleted file mode 100644
index c0c092e1e..000000000
--- a/apps/testing/20-modal/tsconfig.spec.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "extends": "./tsconfig.json",
- "compilerOptions": {
- "outDir": "../../../dist/out-tsc",
- "module": "commonjs",
- "types": ["jest", "node", "@testing-library/jest-dom"]
- },
- "files": ["src/test-setup.ts"],
- "include": [
- "jest.config.ts",
- "src/**/*.test.ts",
- "src/**/*.spec.ts",
- "src/**/*.d.ts"
- ]
-}
diff --git a/apps/testing/23-harness/.eslintrc.json b/apps/testing/23-harness/.eslintrc.json
deleted file mode 100644
index bf8df1428..000000000
--- a/apps/testing/23-harness/.eslintrc.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
- "extends": ["../../../.eslintrc.json"],
- "ignorePatterns": ["!**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "rules": {
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "app",
- "style": "camelCase"
- }
- ],
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": "element",
- "prefix": "app",
- "style": "kebab-case"
- }
- ]
- },
- "extends": [
- "plugin:@nx/angular",
- "plugin:@angular-eslint/template/process-inline-templates"
- ]
- },
- {
- "files": ["*.html"],
- "extends": ["plugin:@nx/angular-template"],
- "rules": {}
- }
- ]
-}
diff --git a/apps/testing/23-harness/README.md b/apps/testing/23-harness/README.md
deleted file mode 100644
index 541da1ac8..000000000
--- a/apps/testing/23-harness/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Harness
-
-> author: thomas-laforge
-
-### Run Application
-
-```bash
-npx nx serve testing-harness
-```
-
-### Documentation and Instruction
-
-Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/23-harness/).
diff --git a/apps/testing/23-harness/jest.config.ts b/apps/testing/23-harness/jest.config.ts
deleted file mode 100644
index 2b9e6d44c..000000000
--- a/apps/testing/23-harness/jest.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable */
-export default {
- displayName: 'testing-harness',
- preset: '../../../jest.preset.js',
- setupFilesAfterEnv: ['Slider configuration
- -
-
-
-
-
-
-
- Slider 1: {{ slider1Value() }}
-Slider 2: {{ slider2Value() }}
-Enabled only if Slider 1 > 20
-
-
- {{ minValue() }}
-
-
-
- {{ maxValue() }}
-
-
- Ticket Detail:
- @if (vm$ | async; as vm) { - @if (vm.loading) { -
- Ticket:
- {{ vm.ticket.id }}
-
-
- Description:
- {{ vm.ticket.description }}
-
-
- AssigneeId:
- {{ vm.ticket.assigneeId }}
-
-
- Is done:
- {{ vm.ticket.completed }}
-
- Tickets
- --
- @for (ticket of vm.tickets; track ticket.id) {
-
-
-
-
-
-
-
-
- Selected Difficulty: {{ difficultyLabel() }}
-
-
-
-
- {{ directionLabel() }}
-
- { author ?
:null}
-
-
-
- }
-
-
diff --git a/docs/src/components/Hero.astro b/docs/src/components/Hero.astro
deleted file mode 100644
index 8d9500eaa..000000000
--- a/docs/src/components/Hero.astro
+++ /dev/null
@@ -1,63 +0,0 @@
----
-import Default from '@astrojs/starlight/components/Hero.astro';
-import MyIcon from './MyIcon.astro';
-import { getEntry } from 'astro:content';
-import SponsorUser from './github/SponsorUser.svelte';
-
-
-
-const { lang } = Astro.props;
-const { data } = await getEntry('i18n', lang);
----
-
-
-
-{data['contributor.title']}
-{data['contributor.subtitle']}
--
- {contributors.map((contributor: string) => (
-
-
-
-
-
-
- ))}
-
-
-
- {challengeNumber &&
-
-
-
diff --git a/docs/src/components/SiteTitle.astro b/docs/src/components/SiteTitle.astro
deleted file mode 100644
index e4fb0c010..000000000
--- a/docs/src/components/SiteTitle.astro
+++ /dev/null
@@ -1,20 +0,0 @@
----
-import Default from '@astrojs/starlight/components/SiteTitle.astro';
-import MyIcon from './MyIcon.astro';
-import SignUp from './github/SignUp.svelte';
-import { Icon } from '@astrojs/starlight/components';
----
-
-{data['page.title.challenge']} #{challengeNumber}
}
-
-
-
-
-
-{isNote ?
-
- :
-*{data['subscription.note.description']}.
- }
-
-
diff --git a/docs/src/components/TableOfContents.astro b/docs/src/components/TableOfContents.astro
deleted file mode 100644
index 529b0e166..000000000
--- a/docs/src/components/TableOfContents.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import Default from '@astrojs/starlight/components/TableOfContents.astro';
-import ActionButtonFooter from './ActionButtonFooter.astro';
-
----
-
-
- 
-
- {/each}
-
-{/if}
-
-
diff --git a/docs/src/components/github/GitHubStats.svelte b/docs/src/components/github/GitHubStats.svelte
deleted file mode 100644
index 8286a2894..000000000
--- a/docs/src/components/github/GitHubStats.svelte
+++ /dev/null
@@ -1,170 +0,0 @@
-
-
-{#if !error && !loading && !loadingStar}
- Answered by
- {#each $data as { user, html_url }}
-
-
- {#if isStarByUser}
-
-{/if}
-
-
diff --git a/docs/src/components/github/SignUp.svelte b/docs/src/components/github/SignUp.svelte
deleted file mode 100644
index a98a2a943..000000000
--- a/docs/src/components/github/SignUp.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-{#if !$token}
-
-
-
- {:else}
-
- {/if}
-
-
- {forksCount}
-
- Log in to Github to see the list
-{:else}
-🔥Total Answers: { globalCount }
- {#if isUsernamePresent}
-
- {/if}
- {#if loading}
- Error: {error}
- {:else} -
- {#each users as { avatar, count, login, challengeNumber }, index}
-
- {count} Answers
-
- {/each}
-
- {/if}
-{/if}
-
-
diff --git a/docs/src/components/leaderboard/LeaderboardChallenge.svelte b/docs/src/components/leaderboard/LeaderboardChallenge.svelte
deleted file mode 100644
index 3cee5229e..000000000
--- a/docs/src/components/leaderboard/LeaderboardChallenge.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-
-
-{#if !$isConnected}
- {challengeNumber.join(', ')}
- Log in to Github to see the list
-{:else}
- {#if isUsernamePresent}
-
- {/if}
- {#if loading}
- Error: {error}
- {:else} -
- {#each users as { avatar, count, login }, index}
-
- {count} Challenges Created
-
- {/each}
-
- {/if}
-{/if}
-
-
diff --git a/docs/src/components/leaderboard/LeaderboardCommit.svelte b/docs/src/components/leaderboard/LeaderboardCommit.svelte
deleted file mode 100644
index e9068576b..000000000
--- a/docs/src/components/leaderboard/LeaderboardCommit.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-
-
-{#if !$isConnected}
- Log in to Github to see the list
-{:else}
- {#if isUsernamePresent}
-
- {/if}
- {#if loading}
- Error: {error}
- {:else} -
- {#each users as { avatar, count, login }, index}
-
- {count} PRs merged
-
- {/each}
-
- {/if}
-{/if}
-
-
diff --git a/docs/src/components/leaderboard/Spinner.svelte b/docs/src/components/leaderboard/Spinner.svelte
deleted file mode 100644
index 07dd361e2..000000000
--- a/docs/src/components/leaderboard/Spinner.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
-
-
diff --git a/docs/src/components/leaderboard/UserBox.svelte b/docs/src/components/leaderboard/UserBox.svelte
deleted file mode 100644
index 887c95327..000000000
--- a/docs/src/components/leaderboard/UserBox.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-
-
-
-
diff --git a/docs/src/content/authors/Ioannis-Tsironis.json b/docs/src/content/authors/Ioannis-Tsironis.json
deleted file mode 100644
index 9cb257672..000000000
--- a/docs/src/content/authors/Ioannis-Tsironis.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "name": "Ioannis Tsironis",
- "github": "https://github.com/tsironis13",
- "linkedin": "https://www.linkedin.com/in/giannis-tsironis/"
-}
diff --git a/docs/src/content/authors/devesh-chaudhari.json b/docs/src/content/authors/devesh-chaudhari.json
deleted file mode 100644
index c1bc4bfb4..000000000
--- a/docs/src/content/authors/devesh-chaudhari.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "name": "Devesh Chaudhari",
- "twitter": "https://twitter.com/DeveshChau"
-}
diff --git a/docs/src/content/authors/lance-finney.json b/docs/src/content/authors/lance-finney.json
deleted file mode 100644
index be44e3e89..000000000
--- a/docs/src/content/authors/lance-finney.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Lance Finney",
- "twitter": "https://twitter.com/LMFinneyCoder",
- "linkedin": "https://www.linkedin.com/in/lmfinney/",
- "github": "https://github.com/LMFinney"
-}
diff --git a/docs/src/content/authors/stanislav-gavrilov.json b/docs/src/content/authors/stanislav-gavrilov.json
deleted file mode 100644
index 7fa793099..000000000
--- a/docs/src/content/authors/stanislav-gavrilov.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "name": "Stanislav Gavrilov",
- "linkedin": "https://www.linkedin.com/in/stgavrilov/",
- "github": "https://github.com/stillst"
-}
diff --git a/docs/src/content/authors/sven-brodny.json b/docs/src/content/authors/sven-brodny.json
deleted file mode 100644
index 3372743d8..000000000
--- a/docs/src/content/authors/sven-brodny.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "name": "Sven Brodny",
- "linkedin": "https://www.linkedin.com/in/sven-brodny-0ba603237/",
- "github": "https://github.com/svenson95"
-}
diff --git a/docs/src/content/authors/thomas-laforge.json b/docs/src/content/authors/thomas-laforge.json
deleted file mode 100644
index 2bfd96588..000000000
--- a/docs/src/content/authors/thomas-laforge.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "name": "Thomas Laforge",
- "twitter": "https://twitter.com/laforge_toma",
- "linkedin": "https://www.linkedin.com/in/thomas-laforge-2b05a945/",
- "github": "https://github.com/tomalaforge"
-}
diff --git a/docs/src/content/authors/timothy-alcaide.json b/docs/src/content/authors/timothy-alcaide.json
deleted file mode 100644
index a50cd7643..000000000
--- a/docs/src/content/authors/timothy-alcaide.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "name": "Timothy Alcaide",
- "github": "https://github.com/alcaidio",
- "youtube": "https://www.youtube.com/@timothyalcaide",
- "twitter": "https://twitter.com/alcaidio",
- "linkedin": "https://www.linkedin.com/in/timothyalcaide"
-}
diff --git a/docs/src/content/authors/wandrille-guesdon.json b/docs/src/content/authors/wandrille-guesdon.json
deleted file mode 100644
index a240cba89..000000000
--- a/docs/src/content/authors/wandrille-guesdon.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "name": "Wandrille Guesdon",
- "linkedin": "https://www.linkedin.com/in/wandrille-guesdon-53a54684/",
- "github": "https://github.com/wandri"
-}
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
deleted file mode 100644
index 91a2d506a..000000000
--- a/docs/src/content/config.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
-import { defineCollection, reference, z } from 'astro:content';
-
-const authors = defineCollection({
- type: 'data',
- schema: z.object({
- name: z.string(),
- twitter: z.string().url().optional(),
- linkedin: z.string().url().optional(),
- github: z.string().url().optional(),
- youtube: z.string().url().optional(),
- }),
-});
-
-const docs = defineCollection({
- schema: (ctx) =>
- docsSchema({
- extend: z.object({
- noCommentSection: z.boolean().optional().default(false),
- challengeNumber: z.union([z.number(), z.boolean()]).default(false),
- author: reference('authors').optional(),
- contributors: z.array(z.string()).optional(),
- command: z.string().optional(),
- blogLink: z.string().optional(),
- videoLinks: z
- .array(
- z.object({
- link: z.string(),
- alt: z.string(),
- flag: z.enum(['FR', 'ES']).optional(),
- }),
- )
- .optional(),
- }),
- })(ctx),
-});
-
-const i18n = defineCollection({
- type: 'data',
- schema: i18nSchema({
- extend: z
- .object({
- 'page.title.challenge': z.string(),
- 'author.createdBy': z.string(),
- 'buttons.email': z.string(),
- 'buttons.star': z.string(),
- 'buttons.sponsor': z.string(),
- 'buttons.clipboardCopy': z.string(),
- 'challenge.footer.note': z.string(),
- 'challenge.footer.running': z.string(),
- 'challenge.footer.start': z.string(),
- 'challenge.footer.reminder': z.string(),
- 'challenge.footer.communityAnswers': z.string(),
- 'challenge.footer.authorAnswer': z.string(),
- 'challenge.footer.blogPost': z.string(),
- 'challenge.footer.video': z.string(),
- 'challenge.footer.gettingStarted.title': z.string(),
- 'challenge.footer.gettingStarted.link': z.string(),
- 'challenge.footer.upvoteAnswer': z.string(),
- 'subscription.button': z.string(),
- 'subscription.email': z.string(),
- 'subscription.note.title': z.string(),
- 'subscription.note.description': z.string(),
- 'contributor.title': z.string(),
- 'contributor.subtitle': z.string(),
- 'sponsors.description': z.string(),
- 'sponsors.joinButton': z.string(),
- })
- .partial(),
- }),
-});
-
-export const collections = {
- docs: docs,
- i18n: i18n,
- authors: authors,
-};
diff --git a/docs/src/content/docs/challenges/angular/1-projection.md b/docs/src/content/docs/challenges/angular/1-projection.md
deleted file mode 100644
index 127530f03..000000000
--- a/docs/src/content/docs/challenges/angular/1-projection.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 🟢 Projection
-description: Challenge 1 is about learning how to project DOM element through components
-author: thomas-laforge
-contributors:
- - tomalaforge
- - jdegand
- - dmmishchenko
- - kabrunko-dev
- - svenson95
-challengeNumber: 1
-command: angular-projection
-blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
-videoLinks:
- - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
- alt: Projection video by Arthur Lannelucq
- flag: FR
- - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
- alt: Projection video by Amos Lucian Isaila
- flag: ES
-sidebar:
- order: 1
----
-
-## Information
-
-In Angular, content projection is a powerful technique for creating highly customizable components. Utilizing and understanding the concepts of ng-content and ngTemplateOutlet can significantly enhance your ability to create shareable components.
-
-You can learn all about ng-content [here](https://angular.dev/guide/components/content-projection) from simple projection to more complex ones.
-
-To learn about ngTemplateOutlet, you can find the API documentation [here](https://angular.dev/api/common/NgTemplateOutlet) along with some basic examples.
-
-With these two tools in hand, you are now ready to take on the challenge.
-
-## Statement
-
-You will start with a fully functional application that includes a dashboard containing a teacher card and a student card. The goal is to implement the city card.
-
-While the application works, the developer experience is far from being optimal. Every time you need to implement a new card, you have to modify the `card.component.ts`. In real-life projects, this component can be shared among many applications. The goal of the challenge is to create a `CardComponent` that can be customized without any modifications. Once you've created this component, you can begin implementing the `CityCardComponent` and ensure you are not touching the `CardComponent`.
-
-## Constraints
-
-- You must refactor the `CardComponent` and `ListItemComponent`.
-- The `@for` must be declared and remain inside the `CardComponent`. You might be tempted to move it to the `ParentCardComponent` like `TeacherCardComponent`.
-- `CardComponent` should not contain any conditions.
-- CSS: try to avoid using `::ng-deep`. Find a better way to handle CSS styling.
-
-## Bonus Challenges
-
-- Use the signal API to manage your components state (documentation [here](https://angular.dev/guide/signals))
-- To reference the template, use a directive instead of magic strings ([What is wrong with magic strings?](https://softwareengineering.stackexchange.com/a/365344))
diff --git a/docs/src/content/docs/challenges/angular/13-highly-customizable-css.md b/docs/src/content/docs/challenges/angular/13-highly-customizable-css.md
deleted file mode 100644
index b08786ea3..000000000
--- a/docs/src/content/docs/challenges/angular/13-highly-customizable-css.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: 🟠 Highly Customizable CSS
-description: Challenge 13 is about creating highly customizable CSS styles
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - kabrunko-dev
- - LMFinney
-challengeNumber: 13
-command: angular-highly-customizable-css
-sidebar:
- order: 104
----
-
-## Information
-
-Styling is an important aspect of a frontend developer's day job, but it is often underestimated. In Angular applications, I frequently see people using `@Input()` to customize the style of their components. However, `@Input()` should only be used for logic. Other techniques, such as **CSS variables** and **host-context**, should be used for styling.
-
-In this challenge, you will need to use both CSS variables and `:host-context` to remove all `@Input()` from your code.
-
-## Constraints
-
-- In your final submission, your component should not contain any lines of code. All styling should be handled within the decorator _(or external css files if you prefer)_
diff --git a/docs/src/content/docs/challenges/angular/21-anchor-navigation.md b/docs/src/content/docs/challenges/angular/21-anchor-navigation.md
deleted file mode 100644
index f094023b8..000000000
--- a/docs/src/content/docs/challenges/angular/21-anchor-navigation.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: 🟢 Anchor Navigation
-description: Challenge 21 is about navigating inside the page with anchor
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
-challengeNumber: 21
-command: angular-anchor-navigation
-sidebar:
- order: 4
----
-
-## Information
-
-You begin with an application that has basic navigation and anchor navigation in the `HomeComponent`. However, using `href` recreates the path each time and refreshes the page.
-
-## Statement
-
-- Your task is to refactor this application to use the built-in navigation tool to better fit within the Angular Framework. You can explore the router, but it's better to stay within the template and use the `RouterLink` directive.
-- To improve the user experience, add smooth scrolling.
diff --git a/docs/src/content/docs/challenges/angular/22-router-input.md b/docs/src/content/docs/challenges/angular/22-router-input.md
deleted file mode 100644
index 1a5127e89..000000000
--- a/docs/src/content/docs/challenges/angular/22-router-input.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: 🟢 @RouterInput()
-description: Challenge 22 is about using the @Input decorator to retrieve router params.
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - svenson95
- - LMFinney
-challengeNumber: 22
-command: angular-router-input
-blogLink: https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617
-sidebar:
- order: 5
----
-
-## Information
-
-In this application, we retrieve three pieces of information inside our `TestComponent` provided by the router:
-
-- We want to retrieve `testId` found inside the params of the URL.
-- We want to obtain `user` located within the query parameters of the URL.
-- We want to access `permission` set inside the `data` object of the route.
-
-In Angular versions 15 or earlier, we use `ActivatedRoute` to obtain all this information and receive them through observables to listen for URL changes.
-
-In version 16, Angular introduced a new `Input` that can listen to route data. You can read more about it [here](https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617).
-
-## Statement
-
-The goal of this exercise is to refactor the code to use the new `RouterInput` strategy.
diff --git a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md b/docs/src/content/docs/challenges/angular/31-module-to-standalone.md
deleted file mode 100644
index 93b0850ef..000000000
--- a/docs/src/content/docs/challenges/angular/31-module-to-standalone.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: 🟢 Module to Standalone
-description: Challenge 31 is about migrating a module based application to a standalone application.
-author: thomas-laforge
-contributors:
- - tomalaforge
-challengeNumber: 31
-command: angular-module-to-standalone
-sidebar:
- order: 6
----
-
-## Information
-
-In v14, standalone components were released and made stable in v15. If you haven't played with them, it's never too late. You can try them out in this challenge.
-
-Moreover, the goal is to see how **Nx** and **standalone components** work together, and experience the process of decoupling your app with Nx lib and standalone components.
-
-Finally, standalone components are very simple to understand, but **routing/lazy-loaded components** can be a bit harder to grasp. This challenge will allow you to manipulate components at different levels of nesting and work with lazy loaded routes.
-
-After completing this challenge, standalone components will no longer hold any secrets for you.
-
-## Statement
-
-The goal of this challenge is to migrate your application from module based components to standalone components.
-
-## Note
-
-You can also test the [Angular schematic](https://angular.dev/reference/migrations/standalone) to migrate NgModule to Standalone components. _(Since we are using nx, start your command with nx instead of ng)_
diff --git a/docs/src/content/docs/challenges/angular/32-change-detection-bug.md b/docs/src/content/docs/challenges/angular/32-change-detection-bug.md
deleted file mode 100644
index 633d41721..000000000
--- a/docs/src/content/docs/challenges/angular/32-change-detection-bug.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: 🟠 Change Detection Bug
-description: Challenge 32 is about debugging an application that has issue when change detection is triggered
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - jdegand
- - LMFinney
-challengeNumber: 32
-command: angular-change-detection-bug
-blogLink: https://medium.com/ngconf/function-calls-inside-template-are-dangerous-15f9822a6629
-sidebar:
- order: 105
----
-
-:::note
-This challenge is inspired by a real-life example that I simplified to create this nice challenge.
-:::
-
-## Information
-
-In this small application, we have a navigation menu to route our application to either `BarComponent` or `FooComponent`. However, our application is not loading and no errors are displayed inside the console.
-
-## Statement
-
-The goal of the challenge is to debug this application and make it work.
-
-:::note
-Without knowing the exact reason for the issue, you can "fix" the error and get the program to function. One such approach would be to memoize `getMenu`. The application might work again, but make sure you really understand the problem and its consequences. Making it work isn't always enough; fixing this bug in the wrong way can cause a loss of performance or lead to other problems later on.
-:::
-
-## Hints
-
-
- 
-
-
-
- {login}
-
- #{index + 1}
-
-
-
-
-Hint 1
- - If you comment out `routerLinkActive="isSelected"` inside `NavigationComponent`, the application loads correctly. -
-
diff --git a/docs/src/content/docs/challenges/angular/33-decoupling-components.md b/docs/src/content/docs/challenges/angular/33-decoupling-components.md
deleted file mode 100644
index 2b900c7a6..000000000
--- a/docs/src/content/docs/challenges/angular/33-decoupling-components.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: 🟠 Decoupling Components
-description: Challenge 33 is about decoupling two strongly coupled components using Injection Token
-author: thomas-laforge
-contributors:
- - tomalaforge
- - jdegand
- - LMFinney
-challengeNumber: 33
-command: angular-decoupling-components
-sidebar:
- order: 106
----
-
-> Big thanks to **Robin Goetz** and his [Spartan Project](https://github.com/goetzrobin/spartan).
-> This challenge was proposed by Robin and is strongly inspired by his project.
-
-## Information
-
-The goal of this challenge is to separate the behavior of a component from its style. For the purpose of this challenge, we will be working on a button element. When we click on it, we will toggle a _disabled_ property which will change the style of the element. This is quite useless in real life but the challenge aims to demonstrate a useful concept.
-
-The behavior of the component (referred to as the _brain_ in the Spartan stack) is located in the brain library. The styling part (referred to as the _helmet_) is located inside the helmet library. Both libraries cannot depend on each other because we want to be able to publish them separately. To help us address the issue, we are using the Nx `enforce-module-boundaries` eslint rule. You can find more details [here](https://nx.dev/core-features/enforce-module-boundaries).
-
-However, the button's helmet needs to access the state of the component to style the button differently based on its state. As mentioned above, we cannot import the `BtnDisabledDirective` directly into the helmet library as done currently. If you go to [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), you will encounter a linting error. **A project tagged with `type:hlm` can only depend on libs tagged with `type:core`**.
-
-## Statement
-
-The goal of this challenge is to find a way to decouple both Directives.
-
-### Hint
-
-Hint 2
- -If you open the [`RouterLinkActive` source code](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) and go to **line 196**, Angular is calling `this.cdr.markForCheck` inside a microTask, which triggers a new CD cycle. If you comment out this line, the application loads again, however, the bug should not be fixed by changing the Angular source code. 😅😯 - -
-
diff --git a/docs/src/content/docs/challenges/angular/4-typed-context-outlet.md b/docs/src/content/docs/challenges/angular/4-typed-context-outlet.md
deleted file mode 100644
index 86d43e5f1..000000000
--- a/docs/src/content/docs/challenges/angular/4-typed-context-outlet.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: 🔴 Typed ContextOutlet
-description: Challenge 4 is about strongly typing ngContextOutlet directives
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - svenson95
- - jdegand
- - LMFinney
-challengeNumber: 4
-command: angular-typed-context-outlet
-blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
-sidebar:
- order: 201
----
-
-## Information
-
-You can improve template type checking for custom directives by adding template guard properties to your directive definition. Angular offers the static function [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) to strongly type structural directives.
-
-However, the context of **NgTemplateOutlet** type is **Object**. But with the help of the above guard, we can improve that behavior.
-
-## Statement
-
-In this exercise, we want to learn how to strongly type our `ng-template` in our `AppComponent`.
-
-This exercise has two levels of complexity.
-
-### Level 1: Known Interface
-
-Currently, we have the following piece of code.
-
-
-
-As we can see, `name` is of type `any`. We want to infer the correct type using the custom directive `PersonDirective`.
-
-### Level 2: Generic Interface
-
-Currently, we have the following piece of code.
-
-
-
-As we can see, `student` is of type `any`. We want to infer the correct type using the custom directive `ListDirective`.
-
-But in this part, we want to pass a list of **any object** to `ListComponent`. And we still want the correct type to be inferred.
diff --git a/docs/src/content/docs/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/challenges/angular/45-react-in-angular.md
deleted file mode 100644
index cef0a4841..000000000
--- a/docs/src/content/docs/challenges/angular/45-react-in-angular.md
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: 🔴 React in angular
-description: Challenge 45 is about learning how to benefit from the numerous libraries in React
-author: wandrille-guesdon
-contributors:
- - wandri
- - tomalaforge
- - jdegand
- - LMFinney
-challengeNumber: 45
-command: angular-react-in-angular
-sidebar:
- order: 209
----
-
-The goal of this challenge is to use a React component inside an Angular application.
-
-Many components are available in React, and it can be interesting to use them in an Angular application. The goal is to create a React component and use it in an Angular application.
-
-## Information
-
-In this challenge, we have a simple application and a React component `ReactPost` in `app/react` to illustrate a React component from a library.
-
-## Statement
-
-- Your task is to display the posts with the React component `ReactPost`.
-- When you select a post, the post should be highlighted.
-
-In order to play with the React component, you should start by installing the React dependencies.
-
-```bash
-npm i --save react react-dom
-npm i --save-dev @types/react @types/react-dom
-```
-
-## Constraints
-
-- Do not transform the React component into an Angular component. The React component is pretty simple and can be written with ease in Angular. But **the goal is to use the React component**.
-
-### Hint
-
-Hint 1
- Carefully read the title of the challenge 😇 -
-
-
-Hint 1 - Configuration
- Allow the React files in tsconfig.json - -``` -{ -... -"compilerOptions": { - ... - "jsx": "react" -}, -... -} -``` - -
-
-
-Hint 2 - Initialization
- Create a React root with `createRoot(...)` -
- .render(
-
- ...
-
- )
- ```
-
-
-
-Hint 3 - Display
- To render the component, it should look like this: - - ``` -
-
diff --git a/docs/src/content/docs/challenges/angular/46-simple-animations.md b/docs/src/content/docs/challenges/angular/46-simple-animations.md
deleted file mode 100644
index aa8887977..000000000
--- a/docs/src/content/docs/challenges/angular/46-simple-animations.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: 🟢 Simple Animations
-description: Challenge 46 is about learning Angular's integrated animation API
-author: sven-brodny
-contributors:
- - svenson95
- - LMFinney
-challengeNumber: 46
-command: angular-simple-animations
-sidebar:
- order: 17
----
-
-## Information
-
-This is the first of two animation challenges. The goal of this series is to master animations in Angular.
-
-Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. Animations can improve your application and user experience in a number of ways:
-
-- Without animations, web page transitions can seem abrupt and jarring.
-- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions.
-- Good animations intuitively call the user's attention to where it is needed.
-
-I would recommend you read the [official documentation](https://angular.dev/guide/animations). You will learn everything that is necessary to successfully complete the challenge.
-
-Otherwise, look at this [working example](https://svenson95.github.io/ng-xmp-animations/) and [git repo](https://github.com/svenson95/ng-xmp-animations) to get inspired.
-
-## Statement
-
-The goal of this challenge is to add animations, they should run when the user arrives on the page or reload the page.
-
-## Constraints
-
-- Don't use any CSS and utilize Angular's integrated `@angular/animations` API.
-- Don't trigger the animations with a button like in the examples, rather when the user enter or reload the page.
-
-### Level 1
-
-Add a fading or moving animation for the paragraphs on the left side.
-
-
-
-### Level 2
-
-Add a stagger animation for the list on the right side.
-
-
diff --git a/docs/src/content/docs/challenges/angular/5-crud-application.md b/docs/src/content/docs/challenges/angular/5-crud-application.md
deleted file mode 100644
index 1e439150a..000000000
--- a/docs/src/content/docs/challenges/angular/5-crud-application.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 🟢 Crud application
-description: Challenge 5 is about refactoring a crud application
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - svenson95
- - jdegand
- - LMFinney
-challengeNumber: 5
-command: angular-crud-application
-sidebar:
- order: 2
----
-
-## Information
-
-Communicating and having a global/local state in sync with your backend is the heart of any application. You will need to master these following best practises to build strong and reliable Angular Applications.
-
-## Statement
-
-In this exercise, you have a small CRUD application, which get a list of TODOS, update and delete some todos.
-
-Currently, we have a working example but filled with lots of bad practices.
-
-### Step 1: refactor with best practices
-
-What you will need to do:
-
-- Avoid **any** as a type. Using Interface to leverage Typescript type system prevent errors
-- Use a **separate service** for all your http calls and use a **Signal** for your todoList
-- Don't **mutate** data
-
-```typescript
-// Avoid this
-this.todos[todoUpdated.id - 1] = todoUpdated;
-
-// Prefer something like this, but need to be improved because we still want the same order
-this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
-```
-
-### Step 2: Improve
-
-- Add a **Delete** button: _Doc of fake API_
-- Handle **errors** correctly. _(Globally)_
-- Add a Global **loading** indicator. _You can use MatProgressSpinnerModule_
-
-### Step 3: Maintainability!! add some test
-
-- Add 2/3 tests
-
-### Step 4: Awesomeness!!! master your state.
-
-- Use the **component store of ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** or **ngrx/signal-store** as a local state of your component.
-- Have a **localized** Loading/Error indicator, e.g. only on the Todo being processed and **disable** all buttons of the processed Todo. _(Hint: you will need to create an ItemComponent)_
diff --git a/docs/src/content/docs/challenges/angular/52-lazy-load-component.md b/docs/src/content/docs/challenges/angular/52-lazy-load-component.md
deleted file mode 100644
index f71c57d48..000000000
--- a/docs/src/content/docs/challenges/angular/52-lazy-load-component.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: 🟢 Lazy Load a Component
-description: Challenge 52 is about understanding how to lazy load a component in Angular.
-author: lance-finney
-contributors:
- - LMFinney
-challengeNumber: 52
-command: angular-lazy-load-component
-sidebar:
- order: 21
----
-
-## Information
-
-Angular has long had route-based lazy loading for entire modules, but lazy loading individual components was much more complicated. This challenge is about understanding how to lazy load a component easily with a feature that was introduced in Angular 17.
-
-## Statement
-
-This is a simple application that can display a `TopComponent` that we are pretending would slow the application down if it were part of the initial bundle (it actually contains just a bit of text, but we are pretending).
-
-The current implementation shows a `PlaceholderComponent` until the user clicks a button to display the `TopComponent`. However, even though the `TopComponent` isn't visible until the button is clicked, it is still loaded as part of the initial bundle.
-
-Use a new feature of Angular 17 to lazy load the `TopComponent` so that it is visible _and loaded_ when the user clicks the button to display it.
-
-When you are done, you should be able to see the `TopComponent` being loaded into the browser in a separate bundle when you click the button to display it. In Chrome, you should see this by opening the DevTools, going to the Network tab, and then clicking the button to display the `TopComponent`.
-
-## Hints
-
-Hint 4 - Design
- Do not forget to allow the React file in Tailwind. -
-
-
-Hint 1
- -You should be able to remove the `topLoaded` signal when you are done. - -
-
-
-Hint 2
- -The new Angular feature will hide the `TopComponent` from view, but it will still be loaded in the initial bundle unless you change how both `AppComponent` and `TopComponent` are defined in their decorators. This challenge start with the old `NgModule`-based architecture, but you will need to change it to use the new feature. - -
-
diff --git a/docs/src/content/docs/challenges/angular/55-back-button-navigation.md b/docs/src/content/docs/challenges/angular/55-back-button-navigation.md
deleted file mode 100644
index 3a2255f49..000000000
--- a/docs/src/content/docs/challenges/angular/55-back-button-navigation.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 🟠 Back-Button-Navigation
-description: Challenge 55 is about overriding browser back button navigation
-author: Ioannis-Tsironis
-contributors:
- - tsironis13
-challengeNumber: 55
-command: angular-back-button-navigation
-sidebar:
- order: 123
----
-
-## Information
-
-The goal of this challenge is to override the default behavior of the browser back button in Angular applications.
-
-We have been prompted by the team's PO to provide a specific implementation when displaying dialog components and
-native browser back button is clicked. Currently, Angular's default behavior when the native back button is clicked is
-to remove the current history entry and go back to the previous route.
-
-The initial state of the application is as follows:
-When any dialog is displayed and the back button is clicked, any opened dialog is closed, and the app redirects to the previous page.
-
-This behavior should be changed according to these requirements:
-
-1. The requirements dictate a few different behaviors depending on which type of dialog is currently visible.
-2. For example, we have a simple
- action dialog that should be closed on the back button click, but we **MUST** remain on the current visited route (/simple-action).
-3. In addition, we have sensitive dialogs like the one on the '/sensitive-action' page that must open a confirmation dialog on a back button click.
-4. The confirmation dialog in combination with the back button click should behave like the simple dialog action one; the confirmation dialog must be closed, and we must remain on the '/sensitive-action' page with the initial dialog still visible.
-
-## Statement
-
-Provide an abstract, generic approach to handling any type of dialog behavior when the native browser back button is clicked.
-Some Typescript design patterns, in combination with the Angular features, could be utilized to support this kind of infrastructure.
-
-## Constraints
-
-- The implementation must not be static depending on the 2 dialog type behaviors presenting on this challenge but also scalable to support any
- new behavior requirements may arise in the future.
-
-### Hint
-
-Hint 3
- -The new feature is [Deferrable Views](https://angular.dev/guide/defer), which provides several different triggers. One of them is ideal for this challenge. - -
-
-
-Hint 1
- -Use the `CanDeactivate` functional guard - -
-
diff --git a/docs/src/content/docs/challenges/angular/58-content-projection-condition.md b/docs/src/content/docs/challenges/angular/58-content-projection-condition.md
deleted file mode 100644
index 7dead94de..000000000
--- a/docs/src/content/docs/challenges/angular/58-content-projection-condition.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: 🟠 Content Projection Condition
-description: Challenge 58 is about conditional content projection in Angular
-author: thomas-laforge
-contributors:
- - tomalaforge
-challengeNumber: 58
-command: angular-content-projection-condition
-sidebar:
- order: 124
----
-
-## Information
-
-Content projection in Angular allows you to create flexible and reusable components by dynamically inserting content from a parent component using `Hint 2
- -Material Design dialog documentation can be found [here](https://material.angular.io/components/dialog/overview) - -
-
-
-Hint 1
- -Use `ChangeDetectionStrategy.OnPush` but this will not be enough. - -
-
diff --git a/docs/src/content/docs/challenges/performance/35-memoization.md b/docs/src/content/docs/challenges/performance/35-memoization.md
deleted file mode 100644
index 52f61389b..000000000
--- a/docs/src/content/docs/challenges/performance/35-memoization.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: 🟢 Memoization
-description: Challenge 35 is about learning how pure pipe works
-author: thomas-laforge
-contributors:
- - tomalaforge
- - LMFinney
-challengeNumber: 35
-command: performance-memoization
-sidebar:
- order: 8
----
-
-## Information
-
-In Angular, pure Pipes are very powerful because the value is memoized, which means if the input value doesn't change, the `transform` function of the pipe is not recomputed, and the cached value is outputted.
-
-You can learn more about pipes in the [Angular documentation](https://angular.dev/guide/pipes) and inside this [deep dive article](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
-
-In this challenge, we start with a button to load a list of people. Each person is associated with a number, and we will use the Fibonacci calculation to create a heavy computation that will slow down the application.
-
-Once the list is loaded, try typing some letters inside the input field. You will notice that the application is very slow, even though you are only performing very basic typing.
-
-:::note
-We will not focus on the initial loading of the list in this challenge.
-:::
-
-Let's use the Angular DevTool to profile our application and understand how this tool can help us understand what is happening inside our application.
-
-:::note
-If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
-:::
-
-Now, start profiling your application and type some letters inside the input field. You will see some red bars showing up inside the profiler panel.
-
-If you click on one of the bars (indicated by the yellow arrow in the picture below), you will see that the change detection cycle is taking more than 3s in `PersonListComponent`.
-
-
-
-## Statement
-
-The goal of this challenge is to understand what is causing this latency and to improve it.
-
-## Hints:
-
-Hint 2
- -Create smaller components to better separate the input field from the list. - -
-
diff --git a/docs/src/content/docs/challenges/performance/36-ngfor-optimization.md b/docs/src/content/docs/challenges/performance/36-ngfor-optimization.md
deleted file mode 100644
index 336f525fa..000000000
--- a/docs/src/content/docs/challenges/performance/36-ngfor-optimization.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: 🟢 NgFor Optimization
-description: Challenge 36 is about learning how trackby works
-author: thomas-laforge
-contributors:
- - tomalaforge
- - LMFinney
-challengeNumber: 36
-command: performance-ngfor-optimization
-sidebar:
- order: 13
----
-
-## Information
-
-In this application, we have a list of individuals that we can add, delete or update. If you open the developer Chrome panel by pressing **F12**, go to the Elements tab, and expand the element to see the list, you will notice that each time you add, delete or update a list item, all the DOM elements are destroyed and initialized again. (See video below).
-
-
-
-We can also use the Angular DevTool to profile our application and understand what is happening inside our application. I will show you how to do it inside the following video.
-
-
-
-:::note
-If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
-:::
-
-If you need more information about `NgFor`, I invite you to read the [documentation](https://angular.dev/api/common/NgFor) first.
-
-## Statement
-
-The goal of this challenge is to understand what is causing this DOM refresh and to solve it.
diff --git a/docs/src/content/docs/challenges/performance/37-optimize-big-list.md b/docs/src/content/docs/challenges/performance/37-optimize-big-list.md
deleted file mode 100644
index daeb5aec9..000000000
--- a/docs/src/content/docs/challenges/performance/37-optimize-big-list.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: 🟠 Optimize Big List
-description: Challenge 37 is about learning how virtualization optimize big list rendering
-author: thomas-laforge
-contributors:
- - tomalaforge
- - jdegand
- - LMFinney
-challengeNumber: 37
-command: performance-optimize-big-list
-sidebar:
- order: 117
----
-
-## Information
-
-In this application, we will render a list of 100,000 individuals by clicking on the **loadList** button. If you open the Chrome developer panel by pressing **F12**, go to the Elements tab, and expand the element to see the list, you will notice that all 100,000 elements are rendered in the DOM, even though we can only see about 20 elements in the viewport. This process takes a lot of time, which is why the application is very slow at displaying the list.
-
-We can use the Angular DevTool to profile our application and understand what is happening inside our application. I will show you how to do it inside the following video.
-
-
-
-:::note
-If you don't know how to use it, read [the performance introduction page](/challenges/performance/) first and come back after.
-:::
-
-## Statement
-
-The goal of this challenge is to implement a better alternative to display big list of items.
-
-## Hints:
-
-Hint 1
- -Use `Pipes` to memoize the Fibonacci computation. - -
-
diff --git a/docs/src/content/docs/challenges/performance/40-web-worker.md b/docs/src/content/docs/challenges/performance/40-web-worker.md
deleted file mode 100644
index 522e19d28..000000000
--- a/docs/src/content/docs/challenges/performance/40-web-worker.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 🟠 Web workers
-description: Challenge 40 is about learning how to create and use a web worker
-author: thomas-laforge
-contributors:
- - tomalaforge
- - jdegand
-challengeNumber: 40
-command: performance-web-workers
-sidebar:
- order: 119
----
-
-## Information
-
-This challenge has been created for [Angular Advent Calendar](https://angularchristmascalendar.com) 2023.
-
-This application is basic. We click on the **Discover** button to reveal the surprise hidden behind the black screen. However, the current application provides an awful user experience. When we click on the button, the page freezes, and after a while, it reveals the secret all at once without a smooth animation.
-
-> Note: To create the application freeze, the loader is based on a very heavy computation function. We could have used a basic timer, but that's not the point of this challenge.
-
-Since JavaScript is single-threaded, when we perform a heavy task, the browser cannot update the UI or respond to mouse clicks or any events. To free the main thread, the goal is to isolate the heavy computation into a different thread. To do so, we will need to use web workers. Web workers can run any scripts in the background, in isolation from the main thread, allowing the browser to still provide your user with a good experience.
-
-In Angular, this technology is often underused, however, it's straightforward to create one. There is a schematic that you can find [here](https://angular.dev/ecosystem/web-workers).
-
-## Statement
-
-The goal of this challenge is to create a smooth animation by isolating the heavy computation function into a web worker.
-
-First, create a web worker using a schematic, then move the issuing function. Finally, the animation should be smooth and the progress percentage should update, which will provide an awesome user experience.
-
-:::note
-Since we are inside an Nx workspace, simply replace the `ng` command with `nx` when running the schematic.
-
-If `nx` is not installed globally on your machine, prefix your command with `npx`.
-:::
diff --git a/docs/src/content/docs/challenges/performance/index.mdx b/docs/src/content/docs/challenges/performance/index.mdx
deleted file mode 100644
index 5a7bb0abe..000000000
--- a/docs/src/content/docs/challenges/performance/index.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Angular Performance
-prev: false
-next: false
-contributors:
- - tomalaforge
- - tomer953
- - LMFinney
-description: Learn how to use the Angular Devtool chrome extension.
-noCommentSection: true
-sidebar:
- order: 1
----
-
-import { LinkCard } from '@astrojs/starlight/components';
-
-In this series of challenges about performance, you will learn how to optimize and enhance the performance of your Angular application.
-
-Before starting to resolve any challenge, I invite you to download the [Angular DevTools Chrome extension](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) if you haven't already done so.
-
-This extension allows you to profile your application and detect performance issues, which is very useful for understanding where performance issues can occur.
-
-## How to use it
-
-When you serve an Angular application, you can inspect a page by pressing F12, which will open the Chrome developer tools. Then navigate to the Angular tab. From there, you can select the Profiler tab as shown below.
-
-
-
-You can now profile your application by clicking on the record button. You can play with your application and see when change detection is triggered and which components are rerendered.
-
-:::tip[Learn more]
-You can learn more on the [documentation page](https://angular.io/guide/devtools).
-:::
-
-Now that you know how to use the Angular DevTool, you can choose a challenge, profile it, and resolve it.
-
-Hint 1
- -If you're unsure where to begin, I recommend reading the [Angular CDK virtualization documentation](https://material.angular.io/cdk/scrolling/overview). - -
-
-
-Pista 1
- - Si comentas `routerLinkActive="isSelected"` dentro de `NavigationComponent`, la aplicación se carga correctamente. -
-
diff --git a/docs/src/content/docs/es/challenges/angular/33-decoupling-components.md b/docs/src/content/docs/es/challenges/angular/33-decoupling-components.md
deleted file mode 100644
index 1af6a2d1a..000000000
--- a/docs/src/content/docs/es/challenges/angular/33-decoupling-components.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: 🟠 Desacoplando Componentes
-description: El desafío 33 trata sobre desacoplar dos componentes fuertemente unidos utilizando Token de Inyección
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
-challengeNumber: 33
-command: angular-decoupling-components
-sidebar:
- order: 106
----
-
-> Muchas gracias a **Robin Goetz** y su [Proyecto Spartan](https://github.com/goetzrobin/spartan).
-> Este desafío fue propuesto por Robin y está fuertemente inspirado en su proyecto.
-
-## Información
-
-El objetivo de este desafío es separar el comportamiento de un componente a traves de su estilo. Para el propósito de este desafío, trabajaremos en un elemento botón. Al hacer clic en él, alternaremos una propiedad llamada _disabled_ para que cambie el estilo del elemento. Esto es bastante inútil en la vida real, pero el desafío tiene como objetivo demostrar un concepto útil.
-
-El comportamiento del componente (referido como el _cerebro_ en el stack de Spartan) se encuentra en la biblioteca del cerebro, la cual es llamada _"brain"_. La parte de estilo (referida como el casco y llamado como _helmet_) está dentro de la biblioteca _helmet_. Ambas bibliotecas no pueden depender una de la otra porque queremos poder publicarlas por separado. Para ayudarnos a abordar el problema, estamos utilizando la regla eslint de Nx. Puedes encontrar más detalles [aquí](https://nx.dev/core-features/enforce-module-boundaries).
-
-Sin embargo, el _helmet_ del botón necesita acceder al estado del componente para estilizar el botón de manera diferente según su estado. Como se mencionó anteriormente, no podemos importar la `BtnDisabledDirective` directamente en la biblioteca _helmet_ como se hace actualmente. Si vas a [`BtnHelmetDirective`](../../libs/decoupling/helmet/src/lib/btn-style.directive.ts), te encontrarás con un error de linting. **Un proyecto etiquetado con `type:hlm` solo puede depender de libs etiquetadas con `type:core`**.
-
-## Declaración
-
-El objetivo de este desafío es encontrar una forma de desacoplar ambas Directivas.
-
-### Pista
-
-Pista 2
- -Si abres el [código fuente de `RouterLinkActive`](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) y vas a la **línea 196**, Angular está llamando a `this.cdr.markForCheck` dentro de una microTarea, lo que desencadena un nuevo ciclo de Detección de Cambios. Si comentas esta línea, la aplicación se carga de nuevo, sin embargo, el bug no está dentro del Framework de Angular. 😅😯 - -
-
diff --git a/docs/src/content/docs/es/challenges/angular/39-injection-token.md b/docs/src/content/docs/es/challenges/angular/39-injection-token.md
deleted file mode 100644
index 03422d342..000000000
--- a/docs/src/content/docs/es/challenges/angular/39-injection-token.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 🟠 InjectionToken
-description: Desafio de Angular 39 para aprender sobre el poder del InjectionToken
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 39
-command: angular-injection-token
-videoLinks:
- - link: https://www.youtube.com/watch?v=ntggdQycFyc
- alt: Injection Token by Arthur Lannelucq
- flag: FR
-sidebar:
- order: 118
----
-
-## Información
-
-En esta pequeña aplicación, comenzamos con un `VideoComponent` que contiene un timer de **1 segundo**. El equipo de desarrollo decidió usar una constante global para almacenar el valor del temporizador: `DEFAULT_TIMER`. Sin embargo, unas semanas más tarde, el equipo de producto quiere agregar una nueva pantalla para llamadas telefónicas llamada `PhoneComponent`, y queremos reutilizar el `TimerComponent`. Sin embargo, el equipo de producto quiere un temporizador de **2 segundos**. ¿Cómo podemos lograr esto?
-
-## Enunciado
-
-Actualmente, el temporizador sigue siendo de 1 segundo para el `PhoneComponent`. El objetivo de este desafío es cambiar el valor del temporizador a 2 segundos para el `PhoneComponent`.
-
-## Restricciones
-
-Se prohíbe el uso de `@Input`. Este ejemplo es básico, y el uso de `@Input` podría ser una buena opción, pero en aplicaciones más complejas, el componente que necesitamos actualizar puede estar profundamente anidado, lo que hace que el uso de `@Input` sea un diseño realmente malo.
-
-## Pista
-
-Pista 1
- Lee cuidadosamente el título del desafío 😇 -
-
diff --git a/docs/src/content/docs/es/challenges/angular/4-typed-context-outlet.md b/docs/src/content/docs/es/challenges/angular/4-typed-context-outlet.md
deleted file mode 100644
index 7cd7e957a..000000000
--- a/docs/src/content/docs/es/challenges/angular/4-typed-context-outlet.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: 🔴 ContextOutlet en forma de tipo
-description: El desafío 4 se trata de tipificar de manera fuerte las directivas de ngContextOutlet
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
-challengeNumber: 4
-command: angular-typed-context-outlet
-blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
-sidebar:
- order: 201
----
-
-## Información
-
-:::note[Nota]
-
-Las declaraciones de tipos permanecerán en ingles, asi como los nombres de los objetos y sus miembros.
-
-:::
-
-Angular ofrece la function estática [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) para reforzar el tipo de una directiva estructural.
-
-Sin embargo, el contexto de **NgTemplateOutlet** es de tipo **Object**. Con la ayuda de la guardia mencionada anteriormente, podemos mejorar ese comportamiento.
-
-## Declaración
-
-En este desafío, queremos aprender como reforzar el tipo de nuestro ng-template en AppComponent.
-
-Este desafío ofrece dos niveles de complejidad:
-
-### Nivel 1: una Interfase conocida
-
-A continuación tenemos estas lineas de código:
-
-
-
-Como se puede observar, "name" es de tipo "any". La meta es inferir el tipo correcto.
-
-### Nivel 2: una Interfase genérica
-
-Actualmente, tenemos estas lineas de código:
-
-
-
-Como puede apreciarse, "student" es de tipo "any". Queremos inferir el tipo de manera correcta.
-
-Pero en esta parte, podemos pasar a ListComponent, una lista de **cualquier cosa**. Aun asi, queremos inferir de manera correcta el tipo de dato.
diff --git a/docs/src/content/docs/es/challenges/angular/5-crud-application.md b/docs/src/content/docs/es/challenges/angular/5-crud-application.md
deleted file mode 100644
index 803a33d6f..000000000
--- a/docs/src/content/docs/es/challenges/angular/5-crud-application.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 🟢 Aplicación CRUD
-description: El desafío 5 se trata de refactorizar una aplicación CRUD.
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
-challengeNumber: 5
-command: angular-crud-application
-sidebar:
- order: 2
----
-
-## Información
-
-Comunicar y tener acceso a un estado global o local en sincronización con tu backend es el corazón de cualquier aplicación. Usted necesita dominar las siguientes mejores practicas para construir aplicaciones en Angular de manera solida y confiable.
-
-## Declaración
-
-En este desafió tenemos una pequeña aplicación CRUD, la cual puede obtener una lista de COSAS POR HACER, actualizar y borrar algunos de los elementos de dicha lista.
-
-Actualmente tenemos un ejemplo funcional, pero repleto de practicas erróneas.
-
-### Paso 1: Refactorizar con mejores practicas.
-
-Usted necesitara:
-
-- Evite el uso del tipo **any**. Use interfaces para prevenir los errores de tipo en Typescript.
-- Use un **servicio separado** para todas las llamadas de http, y use **Signals** para la lista de cosas por hacer.
-- No **mutar** los datos
-
-```typescript
-// Evite esto
-this.todos[todoUpdated.id - 1] = todoUpdated;
-
-// en vez de ello, use algo como esto, pero necesitara mejorar la lógica de manera que preserve el mismo orden.
-this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
-```
-
-### Step 2: Mejorar
-
-- Agregue un botón para **borrar** : _Documentación de la API falsa_
-- Opera de manera correcta los **errores**. _(Globalmente)_
-- Agrega un indicador global de **carga**. _Puedes utilizar MatProgressSpinnerModule_
-
-### Step 3: Mantenibilidad!! adiciona algunos tests
-
-- Adiciona 2/3 tests
-
-### Step 4: Creatividad!!! Domina tu estado.
-
-- Usa de manera apropiada **un component store de ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** o **ngrx/signal-store** como estado local de tu componente.
-- Tener un indicador de Carga/Error **localizado**. Por ejemplo: Solo en el elemento seleccionado de la lista siendo procesado y **desactivar** todos los botones de dicho elemento. _(Pista: Necesitaras crear un ItemComponent)_
diff --git a/docs/src/content/docs/es/challenges/angular/6-structural-directive.md b/docs/src/content/docs/es/challenges/angular/6-structural-directive.md
deleted file mode 100644
index c81967383..000000000
--- a/docs/src/content/docs/es/challenges/angular/6-structural-directive.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: 🟠 Directiva Estructural
-description: El Desafío 6 se trata de generar una Directiva Estructural que manipule los permisos
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
-challengeNumber: 6
-command: angular-structural-directive
-blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
-sidebar:
- order: 102
----
-
-## Información
-
-Las Directivas Estructurales son in concepto importante que necesitaras dominar para mejorar tus habilidades y conocimientos en Angular. Esta es la primera parte del desafío.
-
-En Angular, "Guard" es un concepto muy importante por que siempre las vas a necesitar en cada aplicación que construyas.
-
-## Declaración
-
-En LoginComponent, encontraras 6 botones correspondientes a 6 tipos de roles de usuario:
-
-:::note[Nota]
-
-Se dejaran los nombres de los roles en ingles.
-
-:::
-
-- Admin (Administrador)
-- Manager (Gerente)
-- Reader (Lector)
-- Writer (Escritor)
-- Reader and Writer (Lector y escritor)
-- Client (Cliente)
-- Everyone (Todos)
-
-## Paso 1
-
-En `InformationComponent`, necesitaras mostrar la pieza de información correcta por cada rol usando una directiva estructural.
-
-### Restricciones:
-
-- No puedes usar `ngIf` o `@if` dentro de `InformationComponent`.
-- No puedes importar un store dentro de `InformationComponent`.
-
-You should end up with something like below:
-
-```html
-Pista 1
- -Mirar este [blog post](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) puede ser de gran ayuda. - -Información del Role1
-```
-
-```html
-Información del Role1 y Role2
-```
-
-```html
-Información solo para el Super Administrador
-```
-
-## Paso 2
-
-En `Routes.ts`, deberás usar la guardia `CanMatch` para dirigir a todos los usuarios al correcto `DashboardComponent`.
diff --git a/docs/src/content/docs/es/challenges/angular/8-pure-pipe.md b/docs/src/content/docs/es/challenges/angular/8-pure-pipe.md
deleted file mode 100644
index 814783e3f..000000000
--- a/docs/src/content/docs/es/challenges/angular/8-pure-pipe.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 🟢 Pipe Puro
-description: El desafío 8 trata sobre la creación de un pipe puro
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
- - kabrunko - dev
-challengeNumber: 8
-command: angular-pure-pipe
-blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
-sidebar:
- order: 3
----
-
-El objetivo de esta serie de 3 desafíos de pipes es dominar **pipe** en Angular.
-
-Los pipes puros son una forma muy útil de transformar datos desde tu plantilla. La diferencia entre llamar a una función y un pipe es que los pipes puros son memorizados. Así que no serán recalculados en cada ciclo de detección de cambios si sus entradas no han cambiado.
-
-## Información
-
-En este primer ejercicio, llamas a una función simple dentro de tu plantilla. El objetivo es convertirla en un pipe.
-
-## Restricciones
-
-- El tipo debe ser fuertemente definido.
diff --git a/docs/src/content/docs/es/challenges/angular/9-wrap-function-pipe.md b/docs/src/content/docs/es/challenges/angular/9-wrap-function-pipe.md
deleted file mode 100644
index 11b652f94..000000000
--- a/docs/src/content/docs/es/challenges/angular/9-wrap-function-pipe.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: 🟠 Pipe Wrapper para funciones
-description: El desafío 9 trata sobre la creación de un tubo para envolver funciones de componentes
-author: thomas-laforge
-contributors:
- - ErickRodrCodes
-challengeNumber: 9
-command: angular-wrap-function-pipe
-blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
-sidebar:
- order: 103
----
-
-El objetivo de esta serie de 3 desafíos de pipes es dominar **pipe** en Angular.
-
-Los pipes puros son una forma muy útil de transformar datos desde tu plantilla. La diferencia entre llamar a una función y un pipe es que los pipes puros son memorizados. Así que no serán recalculados en cada ciclo de detección de cambios si sus entradas no han cambiado.
-
-## Información:
-
-En este segundo ejercicio, estás llamando a múltiples funciones dentro de tu plantilla. Puedes crear un pipe específico para cada una de las funciones, pero esto sería demasiado engorroso.
-El objetivo es crear un pipe `wrapFn` para envolver tu función de retorno a través de un pipe. Tu función DEBE permanecer dentro de tu componente. **`WrapFn` debe ser altamente reutilizable.**
-
-## Restricciones:
-
-- El tipo debe ser fuertemente definido.
diff --git a/docs/src/content/docs/es/challenges/performance/12-optimize-change-detection.md b/docs/src/content/docs/es/challenges/performance/12-optimize-change-detection.md
deleted file mode 100644
index 7990d893a..000000000
--- a/docs/src/content/docs/es/challenges/performance/12-optimize-change-detection.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 🟠 Optimizar el Change Detection al desplazarse
-description: Desafío 12 sobre la optimización del número de ciclos de detección de cambios al desplazarse
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 12
-command: performance-optimize-change-detection
-sidebar:
- order: 107
----
-
-## Información
-
-En Angular, hay una biblioteca llamada Zone.js que realiza mucha magia para simplificar la vida del desarrollador. Zone.js parchea todos los eventos del DOM para que vuelva a verificar y volver a renderizar la vista cuando algo ha cambiado dentro de la aplicación. El desarrollador no tiene que activar manualmente la detección de cambios.
-
-Sin embargo, a veces Zone.js activa mucha más detección de cambios de la necesaria. Por ejemplo, cuando se está escuchando un evento de desplazamiento, cada evento de desplazamiento generará un nuevo ciclo de detección de cambios.
-
-En este desafío, solo necesitamos actualizar la vista en una posición de desplazamiento específica para mostrar u ocultar un botón. Todos los demás ciclos son innecesarios.
-
-Para tener una mejor visualización del problema, perfila tu aplicación con Angular Dev Tools.
-
-:::note
-Si no sabes cómo usarlo, lee [la página de introducción al rendimiento](/es/challenges/performance/) primero y vuelve después.
-:::
-
-Puedes obtener más detalles sobre la contaminación de la zona y cómo resolverla [aquí](https://angular.dev/best-practices/zone-pollution).
-
-El siguiente video explicará más a fondo el problema de esta aplicación.
-
-
-
-## Enunciado
-
-Tu objetivo para este desafío es evitar todos los ciclos de detección de cambios innecesarios y activar una detección de cambios solo cuando sea necesario.
-
-## Restricción:
-
-No puedes optar por no usar Zone.js globalmente. Si este código forma parte de un proyecto grande y optas por no usar Zone.js, sin duda romperás tu aplicación.
diff --git a/docs/src/content/docs/es/challenges/performance/34-default-vs-onpush.md b/docs/src/content/docs/es/challenges/performance/34-default-vs-onpush.md
deleted file mode 100644
index d96367299..000000000
--- a/docs/src/content/docs/es/challenges/performance/34-default-vs-onpush.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 🟢 Default vs OnPush
-description: El desafío 34 trata sobre aprender la diferencia entre las estrategias de detección de cambios Default y OnPush.
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 34
-command: performance-default-vs-onpush
-sidebar:
- order: 7
----
-
-## Información
-
-En este desafío, exploraremos las diferencias e impactos de usar `ChangeDetectionStrategy.Default` versus `ChangeDetectionStrategy.OnPush`.
-
-Puedes leer la [documentación de Angular](https://angular.dev/best-practices/skipping-subtrees) para aprender más sobre las diferencias entre estas estrategias.
-
-En este desafío, todos los componentes comienzan con la estrategia `Default`. Cuando escribas letras dentro del campo de entrada, notarás que todos los componentes se resaltan en naranja.
-
-:::note[Nota]
-Agregué resaltado de color a cada componente y cada fila para proporcionar una mejor visualización de cuándo se vuelve a renderizar un componente.
-:::
-
-Como puedes ver, cada letra desencadena un nuevo ciclo de detección de cambios, y todos los componentes se vuelven a renderizar, lo que causa problemas de rendimiento.
-
-Utilicemos la Angular DevTool para perfilar nuestra aplicación y comprender cómo esta herramienta puede ayudarnos a entender qué está sucediendo dentro de nuestra aplicación.
-
-:::note[Nota]
-Si no sabes cómo usarlo, lee primero [la página de introducción al rendimiento](/es/challenges/performance/) y vuelve después.
-:::
-
-Ahora, comienza a perfilar tu aplicación y escribe algunas letras dentro del campo de entrada para desencadenar algunos ciclos de detección de cambios.
-
-Si haces clic en una de las barras (indicada por la flecha amarilla en la imagen a continuación), puedes ver que `PersonListComponent`, `RandomComponent` y todos los `MatListItem` se ven afectados por el ciclo de detección de cambios, incluso cuando solo interactuamos con el campo de entrada.
-
-
-
-## Enunciado
-
-El objetivo de este desafío es mejorar el agrupamiento de la detección de cambios dentro de la aplicación utilizando la estrategia de detección de cambios `OnPush`, pero no solo eso...
-
-## Pistas:
-
-
-
-
-Pista 1
- -Utiliza `ChangeDetectionStrategy.OnPush`, pero esto no será suficiente. - -
-
diff --git a/docs/src/content/docs/es/challenges/performance/35-memoization.md b/docs/src/content/docs/es/challenges/performance/35-memoization.md
deleted file mode 100644
index 89a657f5f..000000000
--- a/docs/src/content/docs/es/challenges/performance/35-memoization.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 🟢 Memoización
-description: El desafío 35 trata sobre cómo funcionan las tuberías puras
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 35
-command: performance-memoization
-sidebar:
- order: 8
----
-
-Pista 2
- -Crea componentes más pequeños para separar mejor el campo de entrada de la lista. - -Desafío #35
-
-## Información
-
-En Angular, los pure pipes son muy poderosas porque el valor se memoiza, lo que significa que si el valor de entrada no cambia, la función `transform` del pipe no se vuelve a calcular y se emite el valor en caché.
-
-Puedes aprender más sobre pipes en la [documentación de Angular](https://angular.dev/guide/pipes) y en este [artículo de inmersión profunda](https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d).
-
-En este desafío, comenzamos con un botón para cargar una lista de personas. Cada persona está asociada con un número y utilizaremos el cálculo de Fibonacci para crear una computación pesada que ralentizará la aplicación.
-
-Una vez que se carga la lista, intenta escribir algunas letras dentro del campo de entrada. Te darás cuenta de que la aplicación es muy lenta, a pesar de que solo estás realizando una escritura muy básica.
-
-:::note[Nota]
-No nos centraremos en la carga inicial de la lista en este desafío.
-:::
-
-Utilicemos la Angular DevTool para perfilar nuestra aplicación y comprender cómo esta herramienta puede ayudarnos a entender qué está sucediendo dentro de nuestra aplicación.
-
-:::note[Nota]
-Si no sabes cómo usarlo, lee primero [la página de introducción al rendimiento](/es/challenges/performance/) y vuelve después.
-:::
-
-Ahora, comienza a perfilar tu aplicación y escribe algunas letras dentro del campo de entrada. Verás que aparecen algunas barras rojas en el panel del perfilador.
-
-Si haces clic en una de las barras (indicada por la flecha amarilla en la imagen a continuación), verás que el ciclo de detección de cambios está tardando más de 3 segundos en `PersonListComponent`.
-
-
-
-## Enunciado
-
-El objetivo de este desafío es comprender qué está causando esta latencia y mejorarla.
-
-## Pistas:
-
-
-
diff --git a/docs/src/content/docs/es/challenges/performance/36-ngfor-optimization.md b/docs/src/content/docs/es/challenges/performance/36-ngfor-optimization.md
deleted file mode 100644
index ae7ae7911..000000000
--- a/docs/src/content/docs/es/challenges/performance/36-ngfor-optimization.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: 🟢 Optimización de NgFor
-description: El Desafío 36 trata sobre como funciona trackby
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 36
-command: performance-ngfor-optimization
-sidebar:
- order: 13
----
-
-## Información
-
-En esta aplicación, tenemos una lista de individuos que podemos agregar, eliminar o actualizar. Si abres el panel de desarrollador de Chrome presionando **F12**, ve a la pestaña source y expande el elemento para ver la lista, notarás que cada vez que agregas, eliminas o actualizas un elemento de la lista, se destruyen y vuelven a inicializar todos los elementos del DOM. (Ver video a continuación).
-
-
-
-También podemos usar la Angular DevTool para perfilar nuestra aplicación y entender qué está sucediendo dentro de ella. Te mostraré cómo hacerlo en el siguiente video.
-
-
-
-:::note
-Si no sabes cómo usarlo, lee primero [la página de introducción al rendimiento](/es/challenges/performance/) y vuelve después.
-:::
-
-Si necesitas más información sobre `NgFor`, te invito a leer primero la [documentación](https://angular.dev/api/common/NgFor).
-
-## Enunciado
-
-El objetivo de este desafío es entender qué está causando esta actualización del DOM y solucionarlo.
diff --git a/docs/src/content/docs/es/challenges/performance/37-optimize-big-list.md b/docs/src/content/docs/es/challenges/performance/37-optimize-big-list.md
deleted file mode 100644
index e1ac099d4..000000000
--- a/docs/src/content/docs/es/challenges/performance/37-optimize-big-list.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: 🟠 Optimizando una lista larga
-description: El desafio 37 trata sobre como optimizar una lista grande de elementos
-author: thomas-laforge
-contributors:
- - nelsongutidev
-challengeNumber: 37
-command: performance-optimize-big-list
-sidebar:
- order: 117
----
-
-## Información
-
-En esta aplicación, renderizaremos una lista de 100,000 individuos al hacer clic en el botón loadList. Si abres el panel de desarrollo de Chrome presionando F12, ve al ícono de Fuente y expande el elemento para ver la lista, notarás que los 100,000 elementos se renderizan en el DOM, aunque solo podemos ver alrededor de 20 elementos en el área visible. Este proceso lleva mucho tiempo, por lo que la aplicación es muy lenta al mostrar la lista.
-
-Podemos utilizar la Herramienta de Desarrollo de Angular para perfilar nuestra aplicación y entender lo que está sucediendo en su interior. Te mostraré cómo hacerlo en el siguiente video.
-
-
-:::[nota]
-Si no sabes cómo usarlo, lee la página de introducción al rendimiento primero y regresa después.
-:::
-
-Enunciado
-El objetivo de este desafío es implementar una alternativa mejor para mostrar una lista grande de elementos.
-
-Pistas:
-
-Pista 1
- -Utiliza `Pipes` para memoizar el cálculo de Fibonacci. - -
-
diff --git a/docs/src/content/docs/es/challenges/performance/index.mdx b/docs/src/content/docs/es/challenges/performance/index.mdx
deleted file mode 100644
index b5a690310..000000000
--- a/docs/src/content/docs/es/challenges/performance/index.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Rendimiento en Angular
-prev: false
-next: false
-contributors:
- - nelsongutidev
-description: Aprende a usar la extensión de Chrome Angular Devtools.
-noCommentSection: true
-sidebar:
- order: 1
----
-
-import { LinkCard } from '@astrojs/starlight/components';
-
-En esta serie de desafíos sobre rendimiento, aprenderás cómo optimizar y mejorar el rendimiento de tu aplicación Angular.
-
-Antes de comenzar a resolver cualquier desafío, te invito a descargar la [extensión de Chrome Angular DevTools](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) si aún no lo has hecho.
-
-Esta extensión te permite perfilar tu aplicación y detectar problemas de rendimiento, lo cual es muy útil para entender dónde pueden ocurrir problemas de rendimiento.
-
-## Cómo usarlo
-
-Cuando sirves una aplicación Angular, puedes inspeccionar una página presionando F12, lo cual abrirá las herramientas de desarrollo de Chrome. Luego navega a la pestaña Angular. Desde allí, puedes seleccionar la pestaña Profiler como se muestra a continuación.
-
-
-
-Ahora puedes perfilar tu aplicación haciendo clic en el botón de grabación. Puedes interactuar con tu aplicación y ver cuándo se activa la detección de cambios y qué componentes se vuelven a renderizar.
-
-:::tip[Aprende más]
-Puedes obtener más información en la [página de documentación](https://angular.io/guide/devtools).
-:::
-
-Ahora que sabes cómo usar la Angular DevTool, puedes elegir un desafío, perfilarlo y resolverlo.
-
-Pista 1
-Si no estás seguro por dónde empezar, te recomiendo leer la documentación de virtualización de Angular CDK. - -
-
diff --git a/docs/src/content/docs/es/guides/getting-started.md b/docs/src/content/docs/es/guides/getting-started.md
deleted file mode 100644
index f533f94fd..000000000
--- a/docs/src/content/docs/es/guides/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Inicio
-description: Una guía para comenzar con los Desafíos de Angular
-contributors:
- - nelsongutidev
- - 1fbr
-sidebar:
- order: 1
----
-
-Para comenzar con Desafíos de Angular, siga estos pasos:
-
-## Crea una cuenta de GitHub
-
-Si desea enviar una solución, deberá tener su propia cuenta de GitHub. Además, tener una cuenta de GitHub siempre es beneficioso y es gratis.
-
-## Crea un fork del proyecto de GitHub
-
-Navegue al [Repositorio de Desafíos de Angular](https://github.com/tomalaforge/angular-challenges) y haga clic en el Fork button in the header. This will create a copy of this repository on your own GitHub page.
-
-## Clone el repositorio en su máquina local
-
-Seleccione un directorio en su computadora local y clone este repositorio.
-
-Abra una terminal, navegue hasta el directorio elegido y escriba el siguiente comando:
-
-```bash
-git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
-```
-
-:::note
-Puede encontrar la URL de clonación haciendo clic en el botón <> Code en su propia instancia del repositorio de Desafíos de Angular.
-
-
-
-:::
-
-## Abra el proyecto en su IDE favorito
-
-Abra el proyecto en cualquier IDE de su elección.
-
-## Instale todas las dependencias
-
-```bash
-npm ci
-```
-
-## Escoja un desafío
-
-Su proyecto ahora está corriendo. El único paso restante es elegir un desafío 🚀
-
-Cada desafío consta de:
-
-- Nombre: indicando de qué se trata el desafío.
-- Número: orden de creación. El número no tiene ningún significado en particular, pero ayuda para hacer referencia en la sección de Pull Request de GitHub.
-- Badge: ayuda a visualizar el grado de dificultad. Es totalmente subjetivo 😅
- - 🟢 fácil
- - 🟠 medio
- - 🔴 difícil
diff --git a/docs/src/content/docs/es/guides/rebase.md b/docs/src/content/docs/es/guides/rebase.md
deleted file mode 100644
index 8f60580f0..000000000
--- a/docs/src/content/docs/es/guides/rebase.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Hacer rebase a tu rama
-description: Guía para hacer rebase a tu rama
-contributors:
- - nelsongutidev
-sidebar:
- order: 6
----
-
-En ocasiones, pueden agregarse cambios al proyecto. Intentaré hacer cambios que no rompan nada, pero a veces es inevitable.
-
-La mayoría de las veces, no necesitarás hacer rebase a tu solución, pero aquí hay una guía para ayudarte a saber cómo hacerlo en caso de ser necesario.
-
-:::note[Nota]
-Esta guía es aplicable a cualquier Proyecto de Código Abierto.
-:::
-
-## Pasos para hacer rebase a tu rama
-
-### Sincroniza tu repositorio
-
-Primero, necesitas sincronizar tu fork para asegurarte de que esté actualizado con el repositorio bifurcado.
-
-Puedes lograr esto haciendo clic en el botón Sync fork en la página principal de tu fork.
-
-
-
-La imagen de arriba muestra que mi rama está detrás de la rama principal por 8 commits, y necesito sincronizarla para estar actualizada.
-
-
-
-### Abre una terminal
-
-Abre cualquier terminal de tu elección, ya sea la de tu IDE favorito o una instancia independiente.
-
-### Git
-
-Sigue los siguientes comandos para hacer rebase a tu rama local:
-
-- git checkout main
-- git pull
-- git checkout [tu rama]
-- git rebase main
-- Resuelve los conflictos
-
-En este paso, el rebase puede detenerse porque tu rama local tiene archivos conflictivos con la rama principal. Corrígelos. Después de esto:
-
-- git add .
-- git rebase --continue
-
-Si tu rama no tiene conflictos, se mostrará un mensaje de éxito.
-
-### Envía tu trabajo de vuelta a la rama remota
-
-Finalmente, envía tu trabajo de vuelta a GitHub:
-
-- git push -f
diff --git a/docs/src/content/docs/es/guides/resolve-challenge.md b/docs/src/content/docs/es/guides/resolve-challenge.md
deleted file mode 100644
index ac8922107..000000000
--- a/docs/src/content/docs/es/guides/resolve-challenge.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Resolver un Desafío
-description: Guía para resolver un desafío
-contributors:
- - nelsongutidev
- - 1fbr
-sidebar:
- order: 2
----
-
-En esta guía, aprenderás cómo resolver un desafío y enviar una respuesta al repositorio principal de GitHub.
-
-## Introducción
-
-Este repositorio ha sido creado utilizando [Nx](https://nx.dev/getting-started/intro). Nx es un monorepositorio que te permite almacenar múltiples aplicaciones dentro del mismo espacio de trabajo. Cada desafío es una aplicación separada. Si abres el directorio `apps`, encontrarás múltiples directorios, cada uno relacionado con un desafío específico. Cada directorio representa una aplicación `Nx` completa e independiente. Para ejecutar e iniciar una, abre tu terminal y ejecuta:
-
-```bash
-npx nx serve ¿Por qué mi aplicación no se está iniciando o por qué encuentro errores en mi terminal cuando ejecuto `nx serve`?
- - La mayoría de las veces, este problema surge porque sus node_modules están desactualizados y necesita actualizarlos ejecutando `npm ci`. - -Si el proceso de instalación falla, puede resolverlo eliminando su carpeta node_modules usando el comando `rm -rf node_modules` o `npx npkill` y luego volviendo a ejecutar `npm ci`. - -Si el problema persiste, informe el problema [aquí](https://github.com/tomalaforge/angular-challenges/issues/new). - -
-
diff --git a/docs/src/content/docs/fr/guides/getting-started.md b/docs/src/content/docs/fr/guides/getting-started.md
deleted file mode 100644
index 562043b6b..000000000
--- a/docs/src/content/docs/fr/guides/getting-started.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Comment démarrer
-contributors:
- - tomalaforge
-description: Un guide sur la manière de commencer avec sur Angular Challenges.
-sidebar:
- order: 1
----
-
-Pour commencer avec les Challenges Angular, suivez ces étapes :
-
-## Créez un compte GitHub
-
-Si vous souhaitez soumettre une réponse, vous devrez avoir votre propre compte GitHub. De plus, avoir un compte GitHub est toujours bénéfique et c'est gratuit.
-
-## Forkez le projet GitHub
-
-Accédez au [répertoire des Challenges Angular](https://github.com/tomalaforge/angular-challenges) et cliquez sur le bouton Fork dans l'en-tête. Cela créera une copie de ce dépôt sur votre propre page GitHub.
-
-## Clonez le dépôt sur votre machine locale
-
-Sélectionnez un répertoire sur votre ordinateur local et clonez ce dépôt.
-
-Ouvrez un terminal, accédez au répertoire choisi et tapez la commande suivante :
-
-```bash
-git clone https://github.com/[VOTRE_NOM_GITHUB]/angular-challenges.git
-```
-
-:::note
-Vous pouvez trouver l'URL de clonage en cliquant sur le bouton <> Code dans votre propre instance du dépôt des Challenges Angular.
-
-
-
-:::
-
-## Ouvrez le projet dans votre IDE préféré
-
-Ouvrez le projet dans n'importe quel IDE de votre choix.
-
-## Installez toutes les dépendances
-
-```bash
-npm ci
-```
-
-## Choisissez un challenge
-
-Votre projet est maintenant opérationnel. La seule étape restante est de choisir un challenge 🚀
-
-Chaque challenge se compose de :
-
-- Nom : indiquant de quoi traite le défi.
-- Numéro : ordre de création. Le numéro n'a pas de signification particulière mais aide pour la référence dans la section des Demandes de Tirage (Pull Requests) GitHub.
-- Badge : aide à visualiser le degré de difficulté. C'est entièrement subjectif 😅
- - 🟢 facile
- - 🟠 moyen
- - 🔴 difficile
diff --git a/docs/src/content/docs/fr/guides/rebase.md b/docs/src/content/docs/fr/guides/rebase.md
deleted file mode 100644
index bf50ebb71..000000000
--- a/docs/src/content/docs/fr/guides/rebase.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Rebase votre branche
-description: Guide pour faire un rebase de sa branche et récupérer les derniers changements.
-contributors:
- - alannelucq
-sidebar:
- order: 6
----
-
-Parfois, des modifications peuvent être ajoutées au projet. Je vais essayer de faire des changements qui ne cassent
-rien, mais parfois, c'est inévitable.
-
-La plupart du temps, vous n'aurez pas besoin de rebaser votre solution, mais voici un guide pour vous aider à savoir
-comment le faire.
-
-:::note
-Ce guide est applicable à tout projet Open Source.
-:::
-
-## Étapes pour rebaser votre branche
-
-### Synchronisez votre dépôt
-
-Tout d'abord, vous devez synchroniser votre fork pour vous assurer qu'il est à jour avec le dépôt forké.
-
-Vous pouvez le faire en cliquant sur le bouton Sync fork sur la page principale de votre fork.
-
-
-
-L'image ci-dessus montre que ma branche a 8 commits de retard par rapport à la branche principale et que je dois la
-synchroniser pour qu'elle soit à jour.
-
-
-
-### Ouvrez un terminal
-
-Ouvrez le terminal de votre choix, soit celui de votre IDE préféré, soit une instance autonome.
-
-### Git
-
-Exécutez les commandes suivantes pour rebaser votre branche locale :
-
-- git checkout main
-- git pull
-- git checkout [votre branche]
-- git rebase main
-- Résolvez les conflits
-
-À cette étape, le rebase peut s'arrêter parce que votre branche locale a des fichiers en conflit avec la branche
-principale. Corrigez-les.
-
-Une fois que c'est fait :
-
-- git add .
-- git rebase --continue
-
-Si votre branche n'a pas de conflit, un message de succès sera affiché.
-
-### Envoyez votre travail vers la branche distante
-
-Enfin, envoyez votre travail vers GitHub :
-
-- git push -f
diff --git a/docs/src/content/docs/fr/guides/resolve-challenge.md b/docs/src/content/docs/fr/guides/resolve-challenge.md
deleted file mode 100644
index 0031a5981..000000000
--- a/docs/src/content/docs/fr/guides/resolve-challenge.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Résoudre un Challenge
-contributors:
- - tomalaforge
-description: Guide pour résoudre un challenge
-sidebar:
- order: 2
----
-
-Dans ce guide, vous apprendrez comment résoudre un challenge et soumettre une réponse sur le répertoire principal de GitHub.
-
-## Introduction
-
-Ce répertoire utilise [Nx](https://nx.dev/getting-started/intro). Nx est un monorépo qui vous permet de stocker plusieurs applications à l'intérieur du même espace de travail. Chaque challenge est une application distincte. Si vous ouvrez le répertoire `apps`, vous trouverez plusieurs dossiers, chacun lié à un challenge spécifique. Chaque dossier représente une application autonome complète `Nx`. Pour exécuter et démarrer l'une d'entre elles, ouvrez votre terminal et exécutez :
-
-```bash
-npx nx serve - Pourquoi mon application ne démarre-t-elle pas, ou pourquoi est-ce que je rencontre des erreurs dans mon terminal lorsque je lance `nx serve` ? -
- -La plupart du temps, ce problème survient parce que vos node_modules sont obsolètes et que vous devez les mettre à jour -en exécutant `npm ci`. - -Si le processus d'installation échoue, vous pouvez résoudre ce problème en supprimant votre dossier node_modules en -utilisant la commande `rm -rf node_modules` ou `npx npkill`, puis en relançant `npm ci`. - -Si le problème persiste, veuillez signaler le -problème [ici](https://github.com/tomalaforge/angular-challenges/issues/new). - --
-
- $5 pour une review -
- $25 pour des reviews a vie -
- Créez un challenge/Contribuez pour des reviews à vie -
-
diff --git a/docs/src/content/docs/guides/getting-started.md b/docs/src/content/docs/guides/getting-started.md
deleted file mode 100644
index e707fa36c..000000000
--- a/docs/src/content/docs/guides/getting-started.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Getting Started
-description: A guide on how to get started with Angular Challenges.
-contributors:
- - tomalaforge
- - 1fbr
- - ho-ssain
- - jdegand
-sidebar:
- order: 1
----
-
-To get started with Angular Challenges, follow these steps:
-
-## Create a GitHub Account
-
-If you wish to submit an answer, you will need to have your own GitHub account. Additionally, having a GitHub account is always beneficial, and it's free.
-
-## Fork the GitHub project
-
-Navigate to the [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) and click on the Fork button in the header. This will create a copy of this repository on your own GitHub profile.
-
-## Clone the repository to your local machine
-
-Select a directory on your local computer and clone this repository.
-
-Open a terminal, navigate to the chosen directory, and type the following command:
-
-```bash
-git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
-```
-
-:::note
-You can find the clone URL by clicking on the <> Code button in your own instance of the Angular Challenges repository.
-
-
-
-:::
-
-## Open the project in your favourite IDE
-
-Open the project in any IDE of your choice.
-
-## Install all dependencies
-
-```bash
-npm ci
-```
-
-## Choose a challenge
-
-Your project is now up and running. The only remaining step is to choose a challenge 🚀
-
-Each challenge consists of:
-
-- Name: indicating what the challenge is about.
-- Number: order of creation. The number doesn't have any particular meaning but helps for reference in GitHub Pull Request section.
-- Badge: helps visualize the degree of difficulty. It's entirely subjective 😅
- - 🟢 easy
- - 🟠 medium
- - 🔴 difficult
-
-## (Alternately) Use GitHub Codespaces
-
-From your own instance of the Angular Challenges repository, click the code button and navigate to the codespaces tab.
-
-
-
-Click the `Create codespace on main` button, and you will navigate to a GitHub codespace.
-
-If you never used a GitHub codespace before, I would recommend you try this short interactive [GitHub Skills Tutorial](https://github.com/skills/code-with-codespaces).
-
-When you navigate to the codespace, there will be a prompt to install the recommended `VS Code` plugins. If you plan on creating a challenge, you can use the `Nx plugin` to generate the starter code. Either way, the codespace will install the dependencies, and you can create a new branch, tackle any challenge, and create a pull request.
-
-When you push to a branch, you do not have to provide a GitHub token.
-
-Once you are finished, remember to pause or delete your codespace. If you don't, GitHub will automatically pause an idle codespace after 30 minutes. You do have a generous amount of free codespace time per month, but it is still important not to waste your allotment.
-
-In the GitHub codespace, copy and paste will be blocked until you give permission.
-
-The GitHub codespace uses port forwarding to serve the projects. Click the prompt after running `npx nx serve [project-name]` to navigate to `localhost:4200`.
diff --git a/docs/src/content/docs/guides/rebase.md b/docs/src/content/docs/guides/rebase.md
deleted file mode 100644
index e91badfb6..000000000
--- a/docs/src/content/docs/guides/rebase.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Rebase your branch
-description: Guide to rebase a branch to latest change
-contributors:
- - tomalaforge
-sidebar:
- order: 6
----
-
-Sometimes, changes may be added to the project. I'll attempt to make changes that won't break anything, but sometimes it's inevitable.
-
-Most of the time, you won't need to rebase your solution, but here is a guide to help you know how to do it.
-
-:::note
-This guide is applicable to any Open Source Project.
-:::
-
-## Steps to rebase your branch
-
-### Sync your repository
-
-First, you need to synchronize your fork to ensure it's up to date with the forked repository.
-
-You can achieve this by clicking the Sync fork button on the main page of your fork.
-
-
-
-The image above shows that my branch is behind of the main branch by 8 commits, and I need to synchronize it to be up to date.
-
-
-
-### Open a terminal
-
-Open any terminal of your choice, either the one from your favorite IDE or a standalone instance.
-
-### Git
-
-Follow the following commands to rebase your local branch:
-
-- git checkout main
-- git pull
-- git checkout [your branch]
-- git rebase main
-- Resolve Conflicts
-
-At this step, the rebase may stop because your local branch has conflicting files with the main branch. Correct them. After this is done:
-
-- git add .
-- git rebase --continue
-
-If your branch doesn't have any conflicts, a success message will be shown.
-
-### Push your work back to the remote branch
-
-Finally, push your work back to GitHub:
-
-- git push -f
diff --git a/docs/src/content/docs/guides/resolve-challenge.md b/docs/src/content/docs/guides/resolve-challenge.md
deleted file mode 100644
index 0b30556a8..000000000
--- a/docs/src/content/docs/guides/resolve-challenge.md
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: Resolve a Challenge
-description: Guide to resolve a challenge
-contributors:
- - tomalaforge
- - 1fbr
- - gsgonzalez88
-sidebar:
- order: 2
----
-
-In this guide, you will learn how to resolve a challenge and submit an answer to the main GitHub repository.
-
-## Introduction
-
-This repository is powered by [Nx](https://nx.dev/getting-started/intro). Nx is a monorepository that allows you to store multiple applications inside the same workspace. Each challenge is a separate application. If you open the `apps` directory, you will find multiple directories, each related to a specific challenge. Each directory represents a complete standalone `Nx` application. To run and start with one, open your terminal and run:
-
-```bash
-npx nx serve Why is my application not starting, or why do I encounter errors in my terminal when I run `nx serve`?
- - Most of the time, this issue arises because your node_modules are outdated, and you need to update them by running `npm ci`. - -If the installation process fails, you can resolve it by deleting your node_modules folder using the command `rm -rf node_modules` or `npx npkill` and then re-running `npm ci`. - -If the problem persists, please report the issue [here](https://github.com/tomalaforge/angular-challenges/issues/new). - --
-
- $5 per review -
- $25 for lifetime reviews -
- Create a challenge/Contribute for lifetime reviews -
-
-
-Dica 1
- - Se você comentar `routerLinkActive="isSelected"` dentro de `NavigationComponent`, a aplicação carregará corretamente. -
-
diff --git a/docs/src/content/docs/pt/challenges/angular/39-injection-token.md b/docs/src/content/docs/pt/challenges/angular/39-injection-token.md
deleted file mode 100644
index b6f4ae8e1..000000000
--- a/docs/src/content/docs/pt/challenges/angular/39-injection-token.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 🟠 InjectionToken
-description: Desafio 39 é sobre o poder da injeção de dependência
-author: thomas-laforge
-contributors:
- - kabrunko-dev
-challengeNumber: 39
-command: angular-injection-token
-videoLinks:
- - link: https://www.youtube.com/watch?v=ntggdQycFyc
- alt: Injection Token by Arthur Lannelucq
- flag: FR
-sidebar:
- order: 118
----
-
-## Informação
-
-Nesta pequena aplicação, começamos com um `VideoComponent` contendo um temporizador de **1-segundo**. O time de desenvolvimento decidiu usar uma constante global para armazenar o valor do temporizador: `DEFAULT_TIMER`. No entanto, algumas semanas depois, o time de produto quer adicionar uma nova tela para chamadas de celular nomeada `PhoneComponent`, e nós queremos reutilizar o `TimerComponent`. Entretanto, o time de produto quer um temporizador de **2-segundos**. Como conseguiremos isso?
-
-## Declaração
-
-Atualmente, o temporizador ainda é de 1 segundo para o `PhoneComponent`. O objetivo deste desafio é mudar o valor do temporizador para 2 segundos para o `PhoneComponent`.
-
-## Restrições
-
-O uso de `@Input` é proibido. O exemplo é básico e usar `@Input` pode ser uma boa opção, mas em aplicações mais complexas, o componente que precisamos atualizar pode estar profundamente aninhado, fazendo o uso de `@Input` um design bem ruim.
-
-## Dicas
-
-Dica 2
- -Se você abrir o [código-fonte de `RouterLinkActive`](https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts) e ir na **linha 196**, verá que o Angular chama `this.cdr.markForCheck` dentro de uma microTask, na qual dispara um novo ciclo de detecção de mudanças (CD). Se você comentar essa linha, a aplicação carrega novamente, mas o bug não é dentro do framework Angular. 😅😯 - -
-
diff --git a/docs/src/content/docs/pt/challenges/angular/4-typed-context-outlet.md b/docs/src/content/docs/pt/challenges/angular/4-typed-context-outlet.md
deleted file mode 100644
index 63dff6a16..000000000
--- a/docs/src/content/docs/pt/challenges/angular/4-typed-context-outlet.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: 🔴 ContextOutlet Tipado
-description: Desafio 4 é sobre tipagem forte em diretivas ngContextOutlet
-author: thomas-laforge
-contributors:
- - tomalaforge
- - tomer953
- - svenson95
- - jdegand
-challengeNumber: 4
-command: angular-typed-context-outlet
-blogLink: https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6
-sidebar:
- order: 201
----
-
-## Informação
-
-Você pode melhorar a verificação de tipo do template para diretivas personalizadas adicionando guardas de propriedades de template na definição de sua diretiva. Angular oferece a função estática [`ngTemplateContextGuard`](https://angular.dev/guide/directives/structural-directives#improving-template-type-checking-for-custom-directives) para tipar fortemente diretivas estruturais.
-
-No entanto, o contexto do tipo do **NgTemplateOutlet** é **Object**. Mas com a a ajuda do guarda acima, podemos melhorar esse comportamento.
-
-## Declaração
-
-Neste exercício, queremos aprender como tipar fortemente nosso `ng-template` no `AppComponent`.
-
-Este exercício tem dois níveis de complexidade.
-
-### Nível 1: Interface Conhecida
-
-Atualmente nós temos o seguinte trecho de código.
-
-
-
-Como podemos ver, `name` é do tipo `any`. Queremos inferir o tipo correto usando a diretiva personalizada `PersonDirective`.
-
-### Level 2: Interface Genérica
-
-No momento presente, temos o seguinte trecho de código.
-
-
-
-Como podemos ver, `student` é do tipo `any`. Queremos inferir o tipo correto usando a diretiva personalizada `ListDirective`.
-
-Mas nesta parte, queremos passar uma lista de **qualquer objeto** para `LPersonistComponent`. E também queremos que o tipo correto seja inferido.
diff --git a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
deleted file mode 100644
index b8b3e9bc5..000000000
--- a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: 🔴 Transição de View
-description: Desafio 44 você aprenderá a nova API para animação de transição de view
-author: thomas-laforge
-contributors:
- - kabrunko-dev
- - svenson95
-challengeNumber: 44
-command: angular-view-transition
-sidebar:
- order: 208
----
-
-## Informação
-
-Este é o segundo de três desafios animation, sendo o objetivo dominar animations em Angular.
-
-A View Transition API é uma nova API que fornece um conjunto de funcionalidades, permitindo desenvolvedores controlarem e manipularem as transições e animações entre views dentro de uma aplicação.
-Isso tem um papel importante na melhoria da experiência do usuário (UX), trazendo vida a aplicações com transições atraentes e cativantes afim de guiar usuários por diferentes páginas e seções da aplicação.
-
-O objetivo deste desafio é aprender a manipular todos os tipos de transições propostas pela API.
-
-Para usar a API, Angular tem uma função `withViewTransitions()` que deve ser injetada dentro da configurações do roteador.
-
-Eu recomendaria a leitura da [documentação Chrome](https://developer.chrome.com/docs/web-platform/view-transitions). Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
-
-Aqui, no entanto, um pequeno resumo:
-Primeiramente, cada elemento DOM tem dois estados; um `old` para quando o elemento está deixando a página, e um `new` para quando está entrando na página:
-
-```css
-::view-transition-old(root) {
-/ / animação
-}
-
-::view-transition-new(root) {
-/ / animação
-}
-```
-
-Para apontar um elemento em específico, você deve adicionar o seletor `view-transition-name` em uma classe CSS no nó DOM, como ilustrado abaixo:
-
-```css
-.specific-element {
- view-transition-name: specific-element;
-}
-```
-
-Isso permite criar uma animação para aquele elemento apenas.
-
-Por último, se um mesmo elemento está presente em ambas as views, você pode automatizar a transição atribuindo o mesmo **nome da transição**.
-
-:::danger[Importante]
-Lembre-se, você pode ter apenas UM ÚNICO `view-transition-name` por página.
-:::
-
-## Declaração
-
-O objetivo deste desafio é realizar a transição entre os estados mostrados no vídeo abaixo:
-
-
-
-Para o estado final mostrado no vídeo seguinte:
-
-
-
-Observe os pontos:
-
-- O cabeçalho desliza para dentro e para fora
-- Cada elemento transiciona suavemente para sua nova localização
-
-### Nível 1
-
-Foque apenas no primeiro thumbnail e crie uma transição agradável e transparente
-
-### Nível 2
-
-Crie a mesma transição atraente para todos os thumbnails, mas sem duplicar o `view-transition-name`. Note que a página tem apenas 3 thumbnails; em um cenário real, você pode ter muito mais.
-
-### Nível 3
-
-Mude para a localização Y correta quando navegando para frente e para trás entre as páginas.
diff --git a/docs/src/content/docs/pt/challenges/angular/45-react-in-angular.md b/docs/src/content/docs/pt/challenges/angular/45-react-in-angular.md
deleted file mode 100644
index a7fa38654..000000000
--- a/docs/src/content/docs/pt/challenges/angular/45-react-in-angular.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 🔴 React em angular
-description: Desafio 5 é sobre aprender como se beneficiar das várias bibliotecas em React
-author: wandrille-guesdon
-contributors:
- - tomalaforge 45
-command: angular-react-in-angular
-sidebar:
- order: 209
----
-
-O objetivo deste desafio é usar um componente React dentro de uma aplicação Angular.
-
-Muitos componentes estão disponíveis em React, e pode ser interessante usar eles em uma aplicação Angular. O objetivo é criar um componente React e usar em uma aplicação Angular.
-
-## Informação
-
-Neste desafio temos uma simples aplicação e um componente React `ReactPost` em `app/react` para ilustrar um componente React de uma biblioteca.
-
-## Declaração
-
-- Sua tarefa é mostrar as postagens com o componente React `ReactPost`.
-- Quando selecionar uma postagem, a postagem deve ser destacada.
-
-Para brincar com o componente React, você deve começar instalando as dependências do React.
-
-```bash
-npm i --save react react-dom
-npm i --save-dev @types/react @types/react-dom
-```
-
-## Restrições
-
-- Não transforme o componente React em um componente Angular. O componente React é bem simples e pode ser escrito facilmente em Angular. No entanto, o **objetivo é usar o componente React**.
-
-### Dica
-
-Dica 1
- -Ler esta [postagem de blog](https://itnext.io/stop-being-scared-of-injectiontokens-ab22f72f0fe9) pode ser de grande ajuda. - -
-
-
-Dica 1 - Configuração
- Permita arquivos React no tsconfig.json - -``` -{ -... -"compilerOptions": { - ... - "jsx": "react" -}, -... -} -``` - -
-
-
-Dica 2 - Initialização
- Crie uma raiz react com `createRoot(...)` -
- .render(
-
- ...
-
- )
- ```
-
-
-
-Dica 3 - Visualização
- Para renderizar o componente, ele deve parecer com: - ``` -
-
diff --git a/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md b/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md
deleted file mode 100644
index 2ef7e1760..000000000
--- a/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: 🟢 Animações Simples
-description: Desafio 46 é sobre aprender a API de animação integrada do Angular
-author: sven-brodny
-contributors:
- - svenson95
-challengeNumber: 46
-command: angular-simple-animations
-sidebar:
- order: 17
----
-
-## Informação
-
-Este é o primeiro de dois desafios de animação, o objetivo desta série é dominar animações no Angular.
-
-Animações bem desenhadas pode fazer sua aplicação mais divertida e direta para usar, mas elas não são apenas comésticas. Animações pode melhorar sua aplicação e a experiência do usuário de várias maneiras:
-
-- Sem animações, transições de página web podem parecer abruptas e desagradáveis.
-- Movimento aumenta bastante a experiência do usuário, uma vez que animações dão a usuários a change de detectar as respostas da aplicação para suas ações.
-- Boas animações intuitivamente chama a atenção do usuário para onde é necessário.
-
-Eu recomendaria você ler a [documentação oficial](https://angular.dev/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
-
-Caso contrário, olhe este [exemplo funcional](https://svenson95.github.io/ng-xmp-animations/) e o [repositório git](https://github.com/svenson95/ng-xmp-animations) para se inspirar.
-
-## Declaração
-
-O objetivo deste desafio é adicionar animações, elas devem executar quando o usuário acessa a página ou a recarrega.
-
-## Restrições
-
-- Não use nenhum CSS e use a API integrada do Angular `@angular/animations`.
-- Não dispare as animações com um botão como nos exemplos, mas quando o usuário entrar ou recarregar a página.
-
-### Nível 1
-
-Adicionar uma animação de movimento e fading para os parágrados no lado esquerdo.
-
-
-
-### Nível 2
-
-Adicionar uma animação cambaleante para a lista no lado direito.
-
-
-
-
-
-
-
-
diff --git a/docs/src/content/docs/pt/challenges/angular/5-crud-application.md b/docs/src/content/docs/pt/challenges/angular/5-crud-application.md
deleted file mode 100644
index 3c6a04fda..000000000
--- a/docs/src/content/docs/pt/challenges/angular/5-crud-application.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: 🟢 Aplicação Crud
-description: Desafio 5 é sobre refatorar uma aplicação crud is about refactoring a crud application
-author: thomas-laforge
-contributors:
- - kabrunko-dev
-challengeNumber: 5
-command: angular-crud-application
-sidebar:
- order: 2
----
-
-## Informação
-
-Comunicar e ter um estado global/local em sincronia com seu backend é o coração de qualquer aplicação. Você necessitará dominar as seguintes melhores práticas para construir aplicações Angular fortes e confiáveis.
-
-## Declaração
-
-Neste exercício, você tem uma pequena aplicação CRUD, que tem uma lista de TODOS, atualiza e exclui alguns todos.
-
-Atualmente temos um exemplo funcional, mas cheio de más práticas.
-
-### Passo 1: refatorar com melhores práticas
-
-O que você precisará:
-
-- Evite **any** como um tipo. Use Interface para aproveitar o sistema de tipos do Typescript para evitar erros
-- Use um **serviço separado** para todas suas chamadas http e use um **Signal** para sua lista de todos
-- Não **mute** em seus dados
-
-```typescript
-// Evite isto
-this.todos[todoUpdated.id - 1] = todoUpdated;
-
-// Prefira algo assim, mas precisa melhorar, porque queremos manter a mesma ordem.
-this.todos = [...this.todos.filter((t) => t.id !== todoUpdated.id), todoUpdated];
-```
-
-### Passo 2: Melhore
-
-- Adicione um botão **Deletar**: _Documentação de API falsa_
-- Lide com **erros** corretamente. _(Globalmente)_
-- Adicione um indicador de **carregamento** global. _Você pode usar MatProgressSpinnerModule_
-
-### Passo 3: Manutenibilidade!! adicione alguns testes
-
-- Adicione 2/3 testes
-
-### Step 4: Incrível!!! domine seu estado.
-
-- Use o **componente store do ngrx**, **ngrx/store**, **rxAngular**, **tanstack-query** ou **ngrx/signal-store** como estado local de seu componente.
-- Tenha um indicador de carregamento/erro **localizado**, e.g. apenas no Todo sendo processado e **desabilite** todos os botões do Todo processado. _(Dica: você precisará criar um ItemComponent)_
diff --git a/docs/src/content/docs/pt/challenges/angular/6-structural-directive.md b/docs/src/content/docs/pt/challenges/angular/6-structural-directive.md
deleted file mode 100644
index f8607b06d..000000000
--- a/docs/src/content/docs/pt/challenges/angular/6-structural-directive.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: 🟠 Diretiva Estrutural
-description: Desafio 6 é sobre criar uma diretiva estrutural para manipular permissões
-author: thomas-laforge
-contributors:
- - kabrunko-dev
-challengeNumber: 6
-command: angular-structural-directive
-blogLink: https://medium.com/@thomas.laforge/create-a-custom-structural-directive-to-manage-permissions-like-a-pro-11a1acad30ad
-sidebar:
- order: 102
----
-
-## Informação
-
-Diretiva estrutural é um conceito importante que você necessita dominar para melhorar suas habilidades e conhecimentos angular. Isso será a primeira parte deste desafio.
-
-Guarda é também muito importante uma vez que você sempre precisará em cada aplicação que construir.
-
-## Declaração
-
-Em LoginComponent, você encontrará 6 botões correspondentes para 6 diferentes funções de usuário.
-
-:::note[Nota]
-Deixaram-se os nomes das funções em inglês.
-:::
-
-- Admin (Administrador)
-- Manager (Gerente)
-- Reader (Leitor)
-- Writer (Escritor)
-- Reader and Writer (Leitor e Escritor)
-- Client (Cliente)
-- Everyone (Todos)
-
-## Passo 1
-
-Em `InformationComponent`, precisa mostrar a informação correta para cada função usando uma diretiva estrutural.
-
-### Restrições
-
-- sem `ngIf` ou `@if` dentro de `InformationComponent`
-- importart a store dentro de `InformationComponent` não é permitido.
-
-Você deve terminar com algo semelhante com o código abaixo:
-
-```html
-Dica 4 - Design
- Não esqueça de permitir o arquivo react no Tailwind. -Info for Role1
-```
-
-```html
-Info for Role1 and Role2
-```
-
-```html
-Info Only for superadmin
-```
-
-## Passo 2
-
-Em `Routes.ts`, você deve rotear todos os usuários para o `DashboardComponent` correto usando a guarda `CanMatch`.
diff --git a/docs/src/content/docs/pt/challenges/angular/8-pure-pipe.md b/docs/src/content/docs/pt/challenges/angular/8-pure-pipe.md
deleted file mode 100644
index 65dea73d8..000000000
--- a/docs/src/content/docs/pt/challenges/angular/8-pure-pipe.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: 🟢 Pipe Puro
-description: Desafio 8 é sobre criar um pipe puro
-author: thomas-laforge
-contributors:
- - kabrunko-dev
-challengeNumber: 8
-command: angular-pure-pipe
-blogLink: https://medium.com/ngconf/deep-dive-into-angular-pipes-c040588cd15d
-sidebar:
- order: 3
----
-
-## Informação
-
-Este é o primeiro de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular.
-
-Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem.
-
-Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização.
-
-Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações.
-
-:::note[Nota]
-Um pipe **puro** é chamado apenas quando o valor muda.\
-Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
-:::
-
-Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.dev/guide/pipes).
-
-## Declaração
-
-Neste exercício, você precisa refatorar uma função de transformação dentro de um componente, o qual é chamado dentro de seu template. O objetivo é converter essa função em um pipe.
-
-## Restrições
-
-- Deve ser fortemente tipado
diff --git a/docs/src/content/docs/pt/challenges/angular/9-wrap-function-pipe.md b/docs/src/content/docs/pt/challenges/angular/9-wrap-function-pipe.md
deleted file mode 100644
index c72b7b463..000000000
--- a/docs/src/content/docs/pt/challenges/angular/9-wrap-function-pipe.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: 🟠 Pipe Empacotador de Função
-description: Challenge 9 is about creating a pipe to wrap component fonctions
-author: thomas-laforge
-contributors:
- - kabrunko-dev
-challengeNumber: 9
-command: angular-wrap-function-pipe
-blogLink: https://medium.com/ngconf/boost-your-apps-performance-by-wrapping-your-functions-inside-a-pipe-7e889a901d1d
-sidebar:
- order: 103
----
-
-## Informação
-
-Este é o segundo de três desafios `@Pipe()`, sendo o objetivo dominar **pipes** em Angular.
-
-Pipes são uma maneira bem poderosa de transformar dados em seu template. A diferença entre chamar uma função e um pipe é que pipes puros são memoizados. Por isso, eles não são recalculados em cada ciclo de detecção de mudanças se suas entradas não mudarem.
-
-Pipes são eficientes e otimizados para performance. Eles usam mecanismos de detecção de mudanças para apenas recalcular o valor se sua entrada mudar, afim de minimizar cálculos desnecessários e melhorar a performance de renderização.
-
-Por padrão um pipe é puro, por isso você deve ter cuidado que ao configurar `pipe` como falso deixar mais propenso a ser ineficiente, uma vez que aumenta o número de renderizações.
-
-:::note[Nota]
-Um pipe **puro** é chamado apenas quando o valor muda.\
-Um pipe **impuro** é chamado em cada ciclo da mudança de deteccção.
-:::
-
-Há alguns pipes pré-definidos bem úteis como DatePipe, UpperCasePipe e CurrencyPipe. Para aprender mais sobre pipes em Angular, dê uma olhada na documentação da API [aqui](https://angular.dev/guide/pipes).
-
-## Declaração
-
-Neste exercício, você está chamando várias funções dentro de seu template. Você pode criar um pipe específico para cada uma das funções, mas isso dará muito trabalho. O objetivo é criar um pipe `wrapFn` que empacote sua função callback através do pipe. Sua função DEVE permanecer dentro do seu componentes. **`WrapFn` deve ser reutilizável**.
-
-## Restrições
-
-- Deve ser fortemente tipado
diff --git a/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md b/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md
deleted file mode 100644
index cad37f205..000000000
--- a/docs/src/content/docs/pt/challenges/forms/41-control-value-accessor.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: 🟠 Control Value Accessor
-description: Desafio 41 é sobre criar um controle personalizado de formulário que implemente a interface Control Value Accessor.
-author: stanislav-gavrilov
-contributors:
- - kabrunko-dev
-challengeNumber: 41
-command: forms-control-value-accessor
-sidebar:
- order: 1
----
-
-## Informação
-
-Neste desafio, o objetivo é criar um campo personalizado de formulário que use a Form API do Angular `ControlValueAccessor`. Você pode achar a documentação [aqui](https://angular.dev/api/forms/ControlValueAccessor). A interface é crucial para criar controles personalizados de formulário que interaja de forma transparente com a API dos formulários do Angular.
-
-## Declaração
-
-O objetivo principal é usar controle no `feedbackForm` para eliminar a necessidade de uso do `@Output` afim de recuperar o valor e injetar ele no `FormGroup`.
-Além disso, você é obrigado a integrar validação para o novo controle afim de assegurar que os dados de avaliação existam. (O botão de submissão do formulário deve ser desabilitado se o formulário é inválido).
-
-Atualmente, a avaliação é programada desta maneira:
-
-```html
-
-
diff --git a/docs/src/content/docs/pt/guides/getting-started.md b/docs/src/content/docs/pt/guides/getting-started.md
deleted file mode 100644
index 57e501bd6..000000000
--- a/docs/src/content/docs/pt/guides/getting-started.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Começando
-description: Um guia de como começar com Desafios Angular.
-contributors:
- - kabrunko-dev
-sidebar:
- order: 1
----
-
-Para começar com Desafios Angular, siga os seguintes passos:
-
-## Crie uma conta GitHub
-
-Se você desejar submeter uma resposta, será necessário ter uma conta pessoal no GitHub. Além disso, ter uma conta GitHub é sempre benéfico e é de graça.
-
-## Crie um fork do projeto GitHub
-
-Navegue para o [reposítório do Desafios Angular](https://github.com/tomalaforge/angular-challenges) e clique no botão Fork no cabeçalho. Isso criará uma cópia do repositório no seu GitHub pessoal.
-
-## Clone o repositório para sua máquina local
-
-Escolha um diretório/pasta no seu computador e clone o repositório.
-
-Abra um terminal, navegue até a pasta selecionada e digite o comando:
-
-```bash
-git clone https://github.com/[SEU_NOME_GITHUB]/angular-challenges.git
-```
-
-:::note[Nota]
-Você pode achar a URL para clonar clicando no botão <> Code na sua própria instância do repositório do Desafios Angular.
-
-
-
-:::
-
-## Abra o projeto na sua IDE favorita
-
-Abra o projeto em uma IDE de sua escolha.
-
-## Instale todas dependências
-
-```bash
-npm ci
-```
-
-## Escolha um desafio
-
-O seu projeto está pronto e funcional. O que falta agora é escolher um desafio 🚀
-
-Cada desafio consiste em:
-
-- Nome: indica sobre o que o desafio é.
-- Número: ordem de criação. O número não tem nenhum significado, mas ajuda na referência para a seção de Pull Request no GitHub.
-- Indicador: ajuda a visualizar o grau de dificuldade. É totalmente subjetivo 😅
- - 🟢 fácil
- - 🟠 médio
- - 🔴 difícil
diff --git a/docs/src/content/docs/pt/guides/rebase.md b/docs/src/content/docs/pt/guides/rebase.md
deleted file mode 100644
index d4bf356d1..000000000
--- a/docs/src/content/docs/pt/guides/rebase.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Rebase sua branch
-description: Guia para realizar rebase em uma branch e atualizá-la com as mudanças mais recentes
-contributors:
- - kabrunko-dev
-sidebar:
- order: 6
----
-
-De tempos em tempos, mudanças podem ser adicionadas no projeto. Eu tentarei fazer mudanças que não quebrem nada, mas algumas vezes é inevitável.
-
-Na maioria das vezes, você não precisará fazer rebase na sua solução, mas aqui está um guia para ajudar em como fazer isso.
-
-:::note[Nota]
-Este guia é aplicável para qualquer Projeto de Código Aberto.
-:::
-
-## Passos para fazer rebase na sua branch
-
-### Sincronize seu repositório
-
-Primeiro, você precisa sincronizar seu fork para garantir que está tudo atualizado com o repositório bifurcado.
-
-Você pode fazer isso clicando no botão Sync fork na página principal de seu fork.
-
-
-
-A imagem acima mostra que minha branch está atrás da branch principal por 8 commits e eu preciso sincronizar para atualizar ela com as mudanças mais recentes.
-
-
-
-### Abra um terminal
-
-Abra um terminal de sua escolha, pode ser tanto na sua IDE favorita ou uma instância independente.
-
-### Git
-
-Siga os seguintes comandos para realizar um rebase na sua branch local:
-
-- git checkout main
-- git pull
-- git checkout [sua branch]
-- git rebase main
-- Resolva Conflitos
-
-Neste passo, o rebase pode parar, porque sua branch local tem arquivos conflitantes com a branch principal. Corrija-os e depois disso feito:
-
-- git add .
-- git rebase --continue
-
-Se sua branch não tem nenhum conflito, uma mensagem de sucesso será mostrada.
-
-### Faça um Push do seu trabalho para a branch remota
-
-Por último, faça um push do seu trabalho de volta para o GitHub:
-
-- git push -f
diff --git a/docs/src/content/docs/pt/guides/resolve-challenge.md b/docs/src/content/docs/pt/guides/resolve-challenge.md
deleted file mode 100644
index a36369183..000000000
--- a/docs/src/content/docs/pt/guides/resolve-challenge.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Resolva um desafio
-description: Guia de como resolver um desafio
-contributors:
- - kabrunko-dev
-sidebar:
- order: 2
----
-
-Neste guia, você aprenderá como resolver um desafio e submeter uma resposta para o repositório principal no GitHub.
-
-## Introdução
-
-Este repositório é feito com [Nx](https://nx.dev/getting-started/intro). Nx é um monorepositório que permite armazenar múltiplas aplicações dentro de um mesmo espaço de trabalho. Cada desafio é uma aplicação separada. Se você abrir o diretório `apps`, achará várias pastas, sendo cada uma relacionada a um desafio específico. Cada diretório representa um aplicação `Nx` completa e independente. Para executar e começar uma aplicação, abra seu terminal e use:
-
-```bash
-npx nx serve Por que minha aplicação não roda ou por que eu encontro erros no meu terminal quando executo `nx serve`?
- - Na maioria das vezes, o problema surge por que seu `node_modules` está desatualizado e você precisa atualizá-lo executando o comando `npm ci`. - -Se a instalação fracassar, você pode resolver deletando o diretório `node_modules` através do comando `rm -rf node_modules` ou `npx npkill`, e depois executar `npm ci` novamente. - -Se o problema persistir, por favor reporte ele [aqui](https://github.com/tomalaforge/angular-challenges/issues/new). - --
-
- $5 por reseña -
- $25 por reseñas de por vida -
- Crea un desafío/Contribuye para revisiones de por vida -
-
diff --git a/docs/src/content/docs/ru/challenges/performance/40-web-worker.md b/docs/src/content/docs/ru/challenges/performance/40-web-worker.md
deleted file mode 100644
index 3d595a137..000000000
--- a/docs/src/content/docs/ru/challenges/performance/40-web-worker.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: 🟠 Веб-воркеры
-description: Испытание 40 о том как создать и использовать веб-воркер
-author: thomas-laforge
-contributors:
- - stillst
-challengeNumber: 40
-command: performance-web-worker
-sidebar:
- order: 119
----
-
-## Информация
-
-Это испытание было создано для [Angular Advent Calendar](https://angularchristmascalendar.com) 2023.
-
-Это простое приложение, где нужно нажать на кнопку **Discover**, чтобы увидеть сюрприз, скрывающийся за черным экраном. Тем не менее, взаимодействие с приложением оставляет желать лучшего. При нажатии на кнопку происходит зависание страницы, а затем, после краткой задержки, секрет раскрывается мгновенно и без какой-либо плавности в анимации.
-
-> Пояснение: Для того, чтобы вызвать зависание приложения, загрузчик использует функцию, выполняющую очень сложные вычисления. Хотя возможно было бы использовать обычный таймер, но это не суть данного испытания.
-
-Так как JavaScript работает в однопоточном режиме, выполнение ресурсоемких задач препятствует обновлению пользовательского интерфейса браузера и реагированию на клики мыши или другие действия. Задача этого испытания - разгрузить основной поток, перенеся сложные вычисления в отдельный поток. Для этой цели мы будем использовать веб-воркеры. Веб-воркеры способны запускать скрипты в фоне, не влияя на основной поток, что позволяет браузеру сохранять высокое качество пользовательского взаимодействия.
-
-В Angular использование этой технологии не так распространено, но внедрить её довольно легко. Есть схематик, который вы можете найти [здесь](https://angular.dev/ecosystem/web-workers) чтобы начать.
-
-## Пояснение
-
-Это испытание направлено на создание плавной анимации за счет перемещения функции, выполняющей сложные вычисления, в веб-воркер.
-
-Для начала, используя схематик, создайте веб-воркер и перенесите в него функцию, вызывающую проблемы. После этих шагов анимация должна стать плавной, а отображение процента выполнения — обновляться, тем самым значительно улучшив пользовательский опыт.
-
-:::note[Пояснение]
-Поскольку мы находимся в рабочем пространстве Nx, просто замените команду `ng` на `nx` при запуске схематика.
-
-Если `nx` не установлен глобально на вашем компьютере, добавьте префикс `npx` к вашей команде.
-:::
diff --git a/docs/src/content/docs/ru/challenges/performance/index.mdx b/docs/src/content/docs/ru/challenges/performance/index.mdx
deleted file mode 100644
index 53a7dc73d..000000000
--- a/docs/src/content/docs/ru/challenges/performance/index.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Производительность Angular-а
-prev: false
-next: false
-contributors:
- - Dinozavvvr
-description: Узнайте, как использовать расширение Angular DevTools для Chrome.
-noCommentSection: true
-sidebar:
- order: 1
----
-
-import { LinkCard } from '@astrojs/starlight/components';
-
-В этой серии испытаний по производительности вы узнаете, как оптимизировать и улучшить производительность вашего приложения Angular.
-
-Прежде чем приступить к решению какого-либо испытания, я приглашаю вас скачать [расширение Angular DevTools для Chrome](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh), если вы еще этого не сделали.
-
-Это расширение позволяет профилировать ваше приложение и обнаруживать проблемы производительности, что очень полезно для понимания мест, где могут возникать проблемы с производительностью.
-
-## Как его использовать
-
-При запуске приложения Angular вы можете проверить страницу, нажав F12, что откроет Инструменты разработчика Chrome. Затем перейдите на вкладку Angular. Оттуда вы можете выбрать вкладку Profiler, как показано ниже.
-
-
-
-Теперь вы можете профилировать свое приложение, нажав кнопку записи. Вы можете играть с вашим приложением и видеть, когда срабатывает обнаружение изменений и какие компоненты перерисовываются.
-
-:::tip[Узнайте больше]
-Вы можете узнать больше на [странице документации](https://angular.io/guide/devtools).
-:::
-
-Теперь, когда вы знаете, как использовать Angular DevTool, вы можете выбрать испытание и решить его с использованием профилирования.
-
-Подсказка 1
- -Если вы не уверены, с чего начать, я рекомендую прочитать [документацию Angular CDK о виртуализации](https://material.angular.io/cdk/scrolling/overview). - -
-
diff --git a/docs/src/content/docs/ru/guides/getting-started.md b/docs/src/content/docs/ru/guides/getting-started.md
deleted file mode 100644
index e269e9bc2..000000000
--- a/docs/src/content/docs/ru/guides/getting-started.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Первые шаги
-description: Руководство о том, как начать работу с испытаниями Angular.
-contributors:
- - stillst
- - 1fbr
-sidebar:
- order: 1
----
-
-Чтобы начать работу с испытаниями Angular, выполните следующие шаги:
-
-## Создайте аккаунт на GitHub
-
-Если вы захотите отправить свое решение для испытания, вам потребуется аккаунт на GitHub. Кроме того, иметь учетную запись на GitHub всегда полезно, тем более это бесплатно.
-
-## Скопируйте GitHub проект
-
-Перейдите в [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) и нажмите на кнопку Fork в вверху страницы. Это создаст копию репозитория на вашей GitHub странице.
-
-## Клонируйте репозиторий на свой компьютер
-
-Выберите папку на своем компьютере и клонируйте репозиторий.
-
-Откройте терминал, перейдите в выбранный каталог и наберите команду:
-
-```bash
-git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
-```
-
-:::note
-
-Вы можете найти URL адрес клонированного репозитория, нажав на кнопку <> Code в вашем собственном экземпляре репозитория Angular Challenges.
-
-
-
-:::
-
-## Откройте проект в вашей любимой среде разработки
-
-Откройте проект в любой IDE на ваш выбор.
-
-## Установите все зависимости
-
-```bash
-npm ci
-```
-
-## Выберите задачу
-
-Ваш проект сейчас поднят и запущен. Осталось только выбрать испытание 🚀
-
-Каждое испытание состоит из:
-
-- Имя: описывает о чем испытание.
-- Номер: порядковый номер создания. Этот номер не несет какого-то смысла, но служит для ссылки в секции GitHub Pull Request.
-- Бейдж: показывает уровень сложности. Полностью субъективно 😅
- - 🟢 простое
- - 🟠 среднее
- - 🔴 сложное
diff --git a/docs/src/content/docs/ru/guides/rebase.md b/docs/src/content/docs/ru/guides/rebase.md
deleted file mode 100644
index dad4d2957..000000000
--- a/docs/src/content/docs/ru/guides/rebase.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Сделайте rebase вашей ветки
-description: Руководство по rebase ветки на последние изменения
-contributors:
- - stillst
-sidebar:
- order: 6
----
-
-Иногда в проект могут вноситься изменения. Я стараюсь вносить изменения, которые ничего не сломают, но иногда этого не избежать.
-
-В большинстве случаев вам не придется делать rebase вашего решения, но вот руководство, которое поможет вам понять, как это сделать.
-
-:::note[Примечание]
-Это руководство применимо к любому проекту с открытым исходным кодом.
-:::
-
-## Шаги rebase
-
-### Синхронизируйте ваш репозиторий
-
-Во-первых, вам нужно синхронизировать вашу копию, чтобы убедиться, что она содержит последние изменения.
-
-Вы можете сделать это, нажав на кнопку Sync fork на главной странице вашего репозитория.
-
-
-
-На изображении выше видно, что моя ветка отстает от основной ветки на 8 коммитов, и мне нужно синхронизировать ее, чтобы она была в актуальном состоянии.
-
-
-
-### Откройте терминал
-
-Откройте любой терминал, будь то терминал в любимой IDE или отдельное приложение.
-
-### Гит
-
-Выполните следующие команды, чтобы сделать rebase локальной ветки:
-
-- git checkout main
-- git pull
-- git checkout [your branch]
-- git rebase main
-- Разрешите конфликты
-
-На этом этапе rebase может остановиться, потому что в вашей локальной ветке есть конфликтующие файлы с основной веткой. Исправьте это. После того как закончите:
-
-- git add .
-- git rebase --continue
-
-Если в вашей ветке нет конфликтов, будет показано сообщение об успехе.
-
-### Отправьте свою работу в удаленный репозиторий
-
-Наконец, отправьте свою работу на GitHub:
-
-- git push -f
diff --git a/docs/src/content/docs/ru/guides/resolve-challenge.md b/docs/src/content/docs/ru/guides/resolve-challenge.md
deleted file mode 100644
index f2e472c62..000000000
--- a/docs/src/content/docs/ru/guides/resolve-challenge.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Пройдите испытание
-description: Инструкция по прохождению испытания
-contributors:
- - stillst
- - 1fbr
-sidebar:
- order: 2
----
-
-В этом руководстве вы узнаете, как пройти испытание и отправить свое решение.
-
-## Вступление
-
-Этот репозиторий работает под управлением [Nx](https://nx.dev/getting-started/intro). Nx - это монорепозиторий, который позволяет вам хранить несколько приложений в одном рабочем пространстве.
-Каждое испытание - это отдельное приложение. Если вы откроете каталог `apps`, то обнаружите несколько директорий, каждая из которых относится к определенной задаче. Каждый каталог представляет собой полноценное приложение `Nx`. Чтобы запустить и начать работу с одним из них, откройте терминал и выполните команду:
-
-```bash
-npx nx serve <ИМЯ_ПРИЛОЖЕНИЯ>
-```
-
-:::note[Примечание]
-Если вы не уверены в названии испытания `ИМЯ_ПРИЛОЖЕНИЯ`, откройте файл README.md. Там написана команда `serve` со ссылкой на документацию по испытанию.
-:::
-
-:::note[Примечание]
-Если `nx` установлен глобально на вашем компьютере, вы можете опустить команду `npx`.
-Чтобы установить `nx` глобально, выполните
-
-```bash
-npm i -g nx
-```
-
-:::
-
-## Создайте Git Ветку
-
-Прежде чем приступить к реализации вашего решения испытания, создайте ветку git для фиксации своей работы.
-
-```bash
-git checkout -b Почему мое приложение не запускается, или почему я вижу ошибки в терминале при запуске `nx serve`?
- -Чаще всего эта проблема возникает из-за того, что `node_modules` устарели, и вам нужно обновить их, выполнив команду `npm ci`. - -Если установка завершилась неудачно, вы можете попробовать решить эту проблему, удалив папку `node_modules` с помощью команды `rm -rf node_modules` или `npx npkill`, а затем снова выполнить `npm ci`. - -Если проблема сохранится, пожалуйста, сообщите о ней [тут](https://github.com/tomalaforge/angular-challenges/issues/new). - --
-
- $5 за рецензию -
- $25 за пожизненные рецензии -
- Создайте вызов/Внесите свой вклад в пожизненные обзоры -
If you want to be informed of new challenges, you can subscribe to the email form.
-
-
diff --git a/docs/src/content/docs/zh-cn/guides/getting-started.md b/docs/src/content/docs/zh-cn/guides/getting-started.md
deleted file mode 100644
index 53033cae6..000000000
--- a/docs/src/content/docs/zh-cn/guides/getting-started.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: 开始
-description: 关于如何开始Angular挑战的指南。
-contributors:
- - tomalaforge
- - 1fbr
- - ho-ssain
- - jdegand
-sidebar:
- order: 1
----
-
-要开始使用 Angular Challenges，请按照以下步骤操作：
-
-## 创建一个GitHub账户
-
-如果你想提交答案，你需要拥有自己的GitHub账户。此外，拥有GitHub账户总是有益的，而且是免费的。
-
-## Fork GitHub 项目
-
-导航至 [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) 在页面顶部点击 Fork 按钮。这将在您的 GitHub 个人资料中创建该存储库的副本。
-
-## 将存储库克隆到您的本地机器上
-
-在您的本地计算机上选择一个目录，然后克隆此存储库。
-
-打开终端，导航到选择的目录，并输入以下命令：
-
-```bash
-git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
-```
-
-:::note[注意]
-
-你可以通过点击Angular Challenges存储库中你自己的实例中的<> Code 按钮来找到克隆URL
-
-
-
-:::
-
-## 在您最喜欢的IDE中打开该项目
-
-使用您选择的任意集成开发环境（IDE）打开该项目。
-
-## 安装所有依赖项
-
-```bash
-npm ci
-```
-
-## 选择一个挑战
-
-您的项目现已启动并正在运行。剩下的唯一步骤是选择一个挑战 🚀
-
-每项挑战包括：
-
-- Name: 表示挑战的内容。
-- Number: 创建顺序。 这个数字没有任何特别的含义，但有助于在 GitHub Pull Request 部分进行参考。
-- Badge: 有助于可视化难度程度。这完全是主观的 😅
- - 🟢 容易
- - 🟠 中等
- - 🔴 困难
-
-## (交替) 使用 GitHub Codespaces
-
-在你自己的 Angular Challenges 存储库实例中，单击代码按钮并导航到 codespaces 选项卡。
-
-
-
-单击 `Create codespace on main` 按钮, 您将导航到 GitHub codespace
-
-如果您以前从未使用过 GitHub codespace，我建议您尝试这个简短的交互式 [GitHub Skills Tutorial](https://github.com/skills/code-with-codespaces).
-
-当您导航到codespace时，将出现一个提示，要求安装推荐的 `VS Code` 插件。如果您打算创建一个挑战，您可以使用 `Nx plugin` 来生成开始代码。无论哪种方式，codespace都将安装依赖项，你可以创建一个新分支，解决任何挑战，并创建一个pull request。
-
-当您推送到分支时，您不必提供 GitHub 令牌。
-
-一旦你完成，记得暂停或删除你的codesace。如果不这样做，GitHub将在30分钟后自动暂停空闲的codesace。你每个月确实有大量的免费codespace时间，但重要的是不要浪费你的分配时间
-
-在GitHub codesace中，复制和粘贴将被阻止，直到你获得许可
-
-GitHub codespace使用端口转发为项目提供服务。单击运行 `npx nx serve [project-name]` 后的提示符，导航到 `localhost:4200` 。
diff --git a/docs/src/content/docs/zh-cn/guides/rebase.md b/docs/src/content/docs/zh-cn/guides/rebase.md
deleted file mode 100644
index a88ec24a6..000000000
--- a/docs/src/content/docs/zh-cn/guides/rebase.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: 变基分支
-description: 将分支变基到最新更改的指南
-contributors:
- - tomalaforge
-sidebar:
- order: 6
----
-
-有时，可能会向项目添加更改。我会尝试做出不会破坏任何东西的更改，但有时这是不可避免的。
-
-大多数情况下，您不需要变基您的解决方案，但这里有一个指南可以帮助您知道如何操作。
-
-:::note[注意]
-本指南适用于任何开源项目。
-:::
-
-## 变基分支的步骤
-
-### 同步存储库
-
-首先，你需要同步你的分支，以确保它与分支的存储库是最新的。
-
-你可以通过点击你的fork主页面上的Sync fork按钮来实现这一点。
-
-
-
-上图显示我的分支比主分支落后 8 个提交，我需要将其同步才能保持最新。
-
-
-
-### 打开终端
-
-打开您选择的任何终端，可以是您最喜欢的 IDE 中的终端，也可以是独立实例。
-
-### Git
-
-请按照以下命令重新设置本地分支的基础：
-
-- git checkout main
-- git pull
-- git checkout [你的分支]
-- git rebase main
-- 解决冲突
-
-在此步骤中，变基可能会停止，因为您的本地分支与主分支有冲突的文件。纠正它们。完成此操作后:
-
-- git add .
-- git rebase --continue
-
-如果您的分支没有任何冲突，则会显示成功消息。
-
-### 将你的工作推送到远程分支
-
-最后，将你的工作推送到GitHub:
-
-- git push -f
diff --git a/docs/src/content/docs/zh-cn/guides/resolve-challenge.md b/docs/src/content/docs/zh-cn/guides/resolve-challenge.md
deleted file mode 100644
index a943fb311..000000000
--- a/docs/src/content/docs/zh-cn/guides/resolve-challenge.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: 解决挑战
-description: 解决挑战指南
-contributors:
- - tomalaforge
- - 1fbr
- - gsgonzalez88
-sidebar:
- order: 2
----
-
-在本指南中，您将学习如何解决挑战并向主GitHub存储库提交答案。
-
-## 介绍
-
-此存储库由 [Nx](https://nx.dev/getting-started/intro) 提供支持。Nx是一个 monorepository，允许您将多个应用程序存储在同一个工作区中。每个挑战都是一个单独的应用程序。如果您打开`apps`目录，您将找到多个目录，每个目录都与一个特定的挑战相关。每个目录都代表一个完整的独立的`Nx`应用程序。想要运行并从某个开始，请打开您的终端并运行：
-
-```bash
-npx nx serve - 为什么我的应用程序没有启动，或者为什么我在运行`nx serve`时在终端中遇到错误? -
- - 大多数情况下，出现这个问题是因为你的node_modules已经过时了，你需要通过运行 `npm ci` 来更新它们。 - -如果安装失败，可以通过 `rm -rf node_modules` 或 `npx npkill` 删除node_modules文件夹，然后重新运行 `npm ci` 来解决。 - -如果问题仍然存在，请在[这里](https://github.com/tomalaforge/angular-challenges/issues/new)报告问题。 - --
-
- 每次评论5美元 -
- 终身评论25美元 -
- 创建一个挑战/贡献终身评论 -
如果您想了解新的挑战，可以订阅电子邮件
-
+
+ `,
+})
+export class CardComponent {}
+```
+
+Используйте `viewProviders` когда хотите, чтобы сервис был внутренней деталью компонента и не «утекал» наружу через слоты контента.
+
+---
+
+## Тестирование через DI
+
+Тестируемость — **главный аргумент** в пользу DI. Поскольку зависимости явные и инжектируются снаружи, в тестах их легко заменить моками без изменения кода компонента.
+
+```ts
+describe('NavbarComponent', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [
+ { provide: AuthService, useValue: { isLoggedIn: () => true } },
+ { provide: Router, useValue: { navigate: jest.fn() } },
+ ],
+ });
+ });
+
+ it('should navigate when logged in', () => {
+ const fixture = TestBed.createComponent(NavbarComponent);
+ // компонент получит моки вместо реальных сервисов
+ });
+});
+```
+
+Компонент ничего не знает о подмене — он просто вызывает `inject()` как обычно.
+
+---
+
+## APP_INITIALIZER — код до старта приложения
+
+Самый частый реальный кейс multi-provider: выполнить асинхронную операцию **до** того, как Angular отрендерит первый компонент. Например, загрузить конфигурацию с сервера.
+
+[Ссылка на доку](https://angular.dev/api/core/APP_INITIALIZER)
+
+```ts
+// config.service.ts
+@Injectable({ providedIn: 'root' })
+export class ConfigService {
+ config: AppConfig | null = null;
+
+ load() {
+ return fetch('/assets/config.json')
+ .then(r => r.json())
+ .then(cfg => { this.config = cfg; });
+ }
+}
+
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+ providers: [
+ {
+ provide: APP_INITIALIZER,
+ useFactory: (cfg: ConfigService) => () => cfg.load(),
+ deps: [ConfigService],
+ multi: true,
+ },
+ ],
+};
+```
+
+Angular дождётся резолва промиса из фабрики и только потом запустит приложение. Если промис реджектится — приложение не загрузится.
+
+> `APP_INITIALIZER` всегда `multi: true` — Angular сам собирает все инициализаторы и запускает их параллельно через `Promise.all`.
+
+---
+
+## Функциональная инъекция
+
+Современный паттерн Angular 17+: вынести `inject()` в переиспользуемую функцию. Функция вызывается как **инициализатор поля класса** — это injection context, поэтому `inject()` внутри работает.
+
+```ts
+// inject-current-user.ts
+export function injectCurrentUser() {
+ const auth = inject(AuthService);
+ return computed(() => auth.user());
+}
+
+// в любом компоненте или сервисе:
+@Component({ ... })
+export class ProfileComponent {
+ currentUser = injectCurrentUser(); // inject() вызван в injection context
+}
+
+@Component({ ... })
+export class NavbarComponent {
+ currentUser = injectCurrentUser(); // тот же паттерн, без дублирования
+}
+```
+
+Паттерн особенно полезен для логики, которая комбинирует несколько сервисов или сигналов — её можно протестировать отдельно через `TestBed.runInInjectionContext()`.
+
+```ts
+it('should return current user', () => {
+ TestBed.configureTestingModule({
+ providers: [{ provide: AuthService, useValue: mockAuth }],
+ });
+
+ const user = TestBed.runInInjectionContext(() => injectCurrentUser());
+ expect(user()).toEqual(mockUser);
+});
+```
+
+---
+
+## Ссылки
+
+- https://angular.dev/guide/di/hierarchical-dependency-injection
+- https://angular.dev/guide/di/dependency-injection-context
+- https://angular.dev/guide/di/dependency-injection-providers
+- https://angular.dev/api/core/APP_INITIALIZER
diff --git a/lessons/dependency-injection/lecture/basics.md b/lessons/dependency-injection/lecture/basics.md
new file mode 100644
index 000000000..abeafba4f
--- /dev/null
+++ b/lessons/dependency-injection/lecture/basics.md
@@ -0,0 +1,454 @@
+# Базовые знания
+Это МАСТХЕВ, синтаксический сахар, называйте как хотите, лучшее изобретение человечества, или в простонародье - Инъекции зависимостей.
+
+Далее по тексту будем называть их инжекторы, инжекция (сути не меняет)
+
+**Дисклеймер**
+
+В этом руководстве ничего нового не придумано, лишь кратко и важно показаны основные моменты использования и пользы для разработки, вся информация есть в [официальной документации](https://angular.dev/).
+
+Отлично, а теперь поехали!
+
+А начнём с примера, когда мир не знал о зависимостях и жил как придётся...
+
+
+### Без DI (жёсткая зависимость)
+Прокидываем и создаём реализации на месте.
+
+```
+export class Auth {
+ private _token: string;
+
+ get token(): string {
+ return this._token;
+ }
+
+ auth(token: string) {
+ this._token = token;
+ }
+}
+
+class User {
+ id: string;
+ name: string;
+
+ getUser(token: string): User {
+ const user = http.get({token});
+
+ this.id = user.id;
+ this.name = user.name;
+
+ return user
+ }
+}
+
+
+/*component*/
+
+constructor() {
+ const authClass = new Auth();
+ const userClass = new User();
+ authClass.auth()
+ userClass.getUser(authClass.token)
+}
+```
+
+Ну это никуда не годится, тут и расширять тяжело, и передавать куда-то ниже зависимости только через prop-drilling, нам такое не надо. Мы будем использовать DI!
+
+
+### С DI (модульно и расширяемо)
+Класс зависит от **интерфейса**, а не от реализации.
+
+```
+export class AuthService {
+ private _token: string;
+
+ get token(): string {
+ return this._token;
+ }
+
+ auth(token: string) {
+ this._token = token;
+ }
+}
+
+class UserService {
+ private readonly authService: AuthService;
+
+
+ id: string;
+ name: string;
+
+ getUser() {
+ const user = http.get({token: this.authService.token});
+
+ this.id = user.id;
+ this.name = user.name;
+
+ return user
+ }
+}
+
+/*component*/
+
+private readonly UserService: UserService;
+private readonly authService: AuthService;
+
+
+constructor() {
+ this.authService.auth()
+ this.userService.getUser()
+}
+```
+
+Вот тут то, что надо! Высший сорт. Теперь при расширении: просто добавим поле или функцию в нужный сервис. при использовании значения в нескольких местах: прокинем его в нужные компоненты по дереву. Ну это же круто!
+
+## Что такое сервисы
+
+[ссылка на доку](https://angular.dev/essentials/dependency-injection)
+
+
+По сути DI очень выручает в сложных и комплексных компонентах или смежных сервисах, для переиспользования кода и чёткой иерархии и структуры данных и операций с ними
+
+## Живой пример
+
+Пример, насколько могут быть комплексными сервисы и компоненты. Да, стоит подумать над дроблением таких махин, но не об этом наша лекция.
+
+
+
+
+
+
+## Давайте разберёмся
+
+
+
+Для своего понимания, абстрактно, можно представить 2 склада слева Service, справа Component. Исходя из потребностей между складами курсируют нужные нам данные (в целом эта абстракция описывает все DI)
+
+
+
+Чтобы наши "склады" работали, необходимо задать им контекст.
+Вообще, с чего мы решили, что эти классы - являются Сервисами?
+
+
+
+Создадим пробный сервис:
+
+```
+import {Injectable} from '@angular/core';
+@Injectable({providedIn: 'root'})
+export class LoggerService {
+ log(category: string, value: string) {
+ console.log('event logged:', {
+ category,
+ value,
+ timestamp: new Date().toISOString(),
+ });
+ }
+}
+```
+
+Теперь разберём что тут к чему:
+
+В начале указываем ключевое слово-декоратор `@Injectable`
+Оно делает экземпляр класса доступным для внедрения в качестве зависимости **`EnvironmentInjector`**
+
+С первым словом понятно, но что означает `providedIn`?
+
+Это и есть наш контекст для сервисов, окружение в котором они функционируют.
+`'root'` - как не трудно понять, делает эту службу доступной во всем приложении как **одноэлементную**. Это рекомендуемый подход для большинства служб.
+
+%% одноэлементная - singleton, означает, что эта служба ОДНА на всё приложение, не будет второй точно такой же %%
+
+*В provideIn можно указать и другие значения - о них будем говорить позже*
+
+`{ providedIn?: Type
+
+ `,
+ styles: [
+ `
+ .card {
+ max-width: 480px;
+ background: white;
+ border-radius: 8px;
+ padding: 2rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+ h1 {
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ }
+ dl {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.5rem 1rem;
+ margin-bottom: 1.5rem;
+ }
+ dt {
+ font-weight: 600;
+ color: #555;
+ }
+ dd {
+ font-family: monospace;
+ font-size: 0.95rem;
+ }
+ .hint {
+ padding: 0.75rem 1rem;
+ background: #fff3cd;
+ border: 1px solid #ffc107;
+ border-radius: 4px;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ }
+ code {
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ font-size: 0.9em;
+ }
+ `,
+ ],
+})
+export class AppComponent {
+ config = inject(ConfigService);
+}
diff --git a/lessons/dependency-injection/tasks/app-initializer/src/app/app.config.ts b/lessons/dependency-injection/tasks/app-initializer/src/app/app.config.ts
new file mode 100644
index 000000000..0a624c53d
--- /dev/null
+++ b/lessons/dependency-injection/tasks/app-initializer/src/app/app.config.ts
@@ -0,0 +1,10 @@
+import { ApplicationConfig } from '@angular/core';
+import { APP_INITIALIZER } from '@angular/core';
+import { ConfigService } from './config.service';
+
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ // TODO: добавь APP_INITIALIZER чтобы ConfigService.load() вызвался до старта приложения
+ ],
+};
diff --git a/lessons/dependency-injection/tasks/app-initializer/src/app/config.service.ts b/lessons/dependency-injection/tasks/app-initializer/src/app/config.service.ts
new file mode 100644
index 000000000..9e5c9cde6
--- /dev/null
+++ b/lessons/dependency-injection/tasks/app-initializer/src/app/config.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+export interface AppConfig {
+ apiUrl: string;
+ appTitle: string;
+ theme: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class ConfigService {
+ private _config: AppConfig = {
+ apiUrl: 'NOT CONFIGURED',
+ appTitle: 'NOT CONFIGURED',
+ theme: 'light',
+ };
+
+ get config(): AppConfig {
+ return this._config;
+ }
+
+ load(): Promise{{ config.config.appTitle }}
+-
+
- API URL +
- {{ config.config.apiUrl }} +
- Theme +
- {{ config.config.theme }} +
+ Видишь "NOT CONFIGURED"? Настрой APP_INITIALIZER в
+ app.config.ts — и значения загрузятся до первого рендера.
+
Abstract Service — useClass
+
+ Оба компонента инжектируют GreetingService, но должны получать
+ разные реализации. Заполни providers в каждом компоненте.
+
+ Загляни в консоль, если не появились компоненты +
+
+
+ `,
+ styles: [
+ `
+ h1 {
+ font-size: 1.5rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .description {
+ color: #555;
+ margin-bottom: 1.5rem;
+ max-width: 600px;
+ line-height: 1.5;
+ }
+
+ .grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1.5rem;
+ max-width: 700px;
+ }
+
+ .info {
+ color: #555;
+ font-size: 0.85rem;
+ padding: 0.5rem 0.75rem;
+ background: #cae8f8;
+ border-left: 3px solid #34ace1;
+ border-radius: 0 4px 4px 0;
+ margin-bottom: 1.5rem;
+ max-width: 600px;
+ }
+
+ code {
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ font-size: 0.9em;
+ }
+ `,
+ ],
+})
+export class AppComponent {}
diff --git a/apps/angular/46-simple-animations/src/app/app.config.ts b/lessons/dependency-injection/tasks/service-abstraction/src/app/app.config.ts
similarity index 100%
rename from apps/angular/46-simple-animations/src/app/app.config.ts
rename to lessons/dependency-injection/tasks/service-abstraction/src/app/app.config.ts
diff --git a/lessons/dependency-injection/tasks/service-abstraction/src/app/casual-panel.component.ts b/lessons/dependency-injection/tasks/service-abstraction/src/app/casual-panel.component.ts
new file mode 100644
index 000000000..c86552c7b
--- /dev/null
+++ b/lessons/dependency-injection/tasks/service-abstraction/src/app/casual-panel.component.ts
@@ -0,0 +1,100 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { GreetingService, CasualGreetingService } from './greeting.service';
+
+@Component({
+ selector: 'app-casual-panel',
+ imports: [FormsModule],
+ providers: [
+ // TODO: предоставь CasualGreetingService как реализацию GreetingService
+ // { provide: GreetingService, useClass: ??? }
+
+ ],
+ template: `
+
+
+ `,
+ styles: [
+ `
+ .panel {
+ background: white;
+ border-radius: 8px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ }
+ .casual {
+ border-top: 4px solid #ea580c;
+ }
+ h2 {
+ font-size: 1.1rem;
+ color: #ea580c;
+ margin-bottom: 0.25rem;
+ }
+ .subtitle {
+ font-size: 0.8rem;
+ color: #888;
+ margin-bottom: 1rem;
+ }
+ .controls {
+ display: flex;
+ gap: 0.5rem;
+ }
+ input {
+ flex: 1;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #d1d5db;
+ border-radius: 4px;
+ font-size: 0.95rem;
+ }
+ button {
+ padding: 0.5rem 1rem;
+ background: #ea580c;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.95rem;
+ }
+ button:hover {
+ background: #c2410c;
+ }
+ .result {
+ margin-top: 1rem;
+ padding: 0.75rem 1rem;
+ background: #fff7ed;
+ border-radius: 4px;
+ font-style: italic;
+ color: #7c2d12;
+ }
+ code {
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ font-size: 0.85em;
+ }
+ `,
+ ],
+})
+export class CasualPanelComponent {
+ private greeting = inject(GreetingService);
+
+ name = signal('');
+ result = signal('');
+
+ greet(): void {
+ if (this.name()) {
+ this.result.set(this.greeting.greet(this.name()));
+ }
+ }
+}
diff --git a/lessons/dependency-injection/tasks/service-abstraction/src/app/formal-panel.component.ts b/lessons/dependency-injection/tasks/service-abstraction/src/app/formal-panel.component.ts
new file mode 100644
index 000000000..70bebdb94
--- /dev/null
+++ b/lessons/dependency-injection/tasks/service-abstraction/src/app/formal-panel.component.ts
@@ -0,0 +1,99 @@
+import { Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { GreetingService, FormalGreetingService } from './greeting.service';
+
+@Component({
+ selector: 'app-formal-panel',
+ imports: [FormsModule],
+ providers: [
+ // TODO: предоставь FormalGreetingService как реализацию GreetingService
+ // { provide: GreetingService, useClass: ??? }
+ ],
+ template: `
+ Casual context
+Uses CasualGreetingService
+
+
+
+
+ @if (result()) {
+ {{ result() }}
+ } +
+
+ `,
+ styles: [
+ `
+ .panel {
+ background: white;
+ border-radius: 8px;
+ padding: 1.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ }
+ .formal {
+ border-top: 4px solid #1e40af;
+ }
+ h2 {
+ font-size: 1.1rem;
+ color: #1e40af;
+ margin-bottom: 0.25rem;
+ }
+ .subtitle {
+ font-size: 0.8rem;
+ color: #888;
+ margin-bottom: 1rem;
+ }
+ .controls {
+ display: flex;
+ gap: 0.5rem;
+ }
+ input {
+ flex: 1;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #d1d5db;
+ border-radius: 4px;
+ font-size: 0.95rem;
+ }
+ button {
+ padding: 0.5rem 1rem;
+ background: #1e40af;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 0.95rem;
+ }
+ button:hover {
+ background: #1d3a9e;
+ }
+ .result {
+ margin-top: 1rem;
+ padding: 0.75rem 1rem;
+ background: #eff6ff;
+ border-radius: 4px;
+ font-style: italic;
+ color: #1e3a8a;
+ }
+ code {
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ font-size: 0.85em;
+ }
+ `,
+ ],
+})
+export class FormalPanelComponent {
+ private greeting = inject(GreetingService);
+
+ name = signal('');
+ result = signal('');
+
+ greet(): void {
+ if (this.name()) {
+ this.result.set(this.greeting.greet(this.name()));
+ }
+ }
+}
diff --git a/lessons/dependency-injection/tasks/service-abstraction/src/app/greeting.service.ts b/lessons/dependency-injection/tasks/service-abstraction/src/app/greeting.service.ts
new file mode 100644
index 000000000..d915bedf9
--- /dev/null
+++ b/lessons/dependency-injection/tasks/service-abstraction/src/app/greeting.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+export abstract class GreetingService {
+ abstract greet(name: string): string;
+}
+
+@Injectable()
+export class FormalGreetingService extends GreetingService {
+ override greet(name: string): string {
+ return `Доброго дня, ${name}. Я очень рад видеть тебя сегодня.`;
+ }
+}
+
+@Injectable()
+export class CasualGreetingService extends GreetingService {
+ override greet(name: string): string {
+ return `Здарова ${name}! Чё как? 😄`;
+ }
+}
diff --git a/apps/angular/45-react-in-angular/src/assets/.gitkeep b/lessons/dependency-injection/tasks/service-abstraction/src/assets/.gitkeep
similarity index 100%
rename from apps/angular/45-react-in-angular/src/assets/.gitkeep
rename to lessons/dependency-injection/tasks/service-abstraction/src/assets/.gitkeep
diff --git a/apps/angular/46-simple-animations/src/favicon.ico b/lessons/dependency-injection/tasks/service-abstraction/src/favicon.ico
similarity index 100%
rename from apps/angular/46-simple-animations/src/favicon.ico
rename to lessons/dependency-injection/tasks/service-abstraction/src/favicon.ico
diff --git a/apps/angular/45-react-in-angular/src/index.html b/lessons/dependency-injection/tasks/service-abstraction/src/index.html
similarity index 86%
rename from apps/angular/45-react-in-angular/src/index.html
rename to lessons/dependency-injection/tasks/service-abstraction/src/index.html
index 9d9dd3923..d79fe5be8 100644
--- a/apps/angular/45-react-in-angular/src/index.html
+++ b/lessons/dependency-injection/tasks/service-abstraction/src/index.html
@@ -2,7 +2,7 @@
- Formal context
+Uses FormalGreetingService
+
+
+
+
+ @if (result()) {
+ {{ result() }}
+ } +viewProviders vs providers
+ ++ Нажми Change color и посмотри — меняется ли цвет у + projected content внутри карточки? +
+ +
+
+ `,
+ styles: [
+ `
+ h1 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+ .description {
+ margin-bottom: 1.5rem;
+ color: #444;
+ max-width: 480px;
+ }
+ .hint {
+ margin-top: 1.5rem;
+ max-width: 480px;
+ padding: 1rem;
+ background: #e8f4fd;
+ border: 1px solid #90caf9;
+ border-radius: 6px;
+ font-size: 0.9rem;
+ line-height: 1.6;
+ }
+ .hint p + p {
+ margin-top: 0.5rem;
+ }
+ code {
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ font-size: 0.9em;
+ }
+ `,
+ ],
+})
+export class AppComponent {}
diff --git a/apps/rxjs/49-hold-to-save-button/src/app/app.config.ts b/lessons/dependency-injection/tasks/view-providers/src/app/app.config.ts
similarity index 100%
rename from apps/rxjs/49-hold-to-save-button/src/app/app.config.ts
rename to lessons/dependency-injection/tasks/view-providers/src/app/app.config.ts
diff --git a/lessons/dependency-injection/tasks/view-providers/src/app/card.component.ts b/lessons/dependency-injection/tasks/view-providers/src/app/card.component.ts
new file mode 100644
index 000000000..47aee9d17
--- /dev/null
+++ b/lessons/dependency-injection/tasks/view-providers/src/app/card.component.ts
@@ -0,0 +1,64 @@
+import { Component, inject } from '@angular/core';
+import { ThemeService } from './theme.service';
+
+@Component({
+ selector: 'app-card',
+ providers: [ThemeService],
+ template: `
+
+ Сейчас: оба блока меняют цвет — projected content получает
+ ThemeService карточки через providers.
+
+ После исправления: меняется только карточка — projected content
+ использует root ThemeService (цвет остаётся blue).
+
+
+ `,
+ styles: [
+ `
+ .card {
+ border: 3px solid;
+ border-radius: 8px;
+ overflow: hidden;
+ background: white;
+ max-width: 480px;
+ }
+ .card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ color: white;
+ }
+ .card-body {
+ padding: 1rem;
+ }
+ .label {
+ display: block;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ opacity: 0.8;
+ }
+ button {
+ padding: 0.4rem 0.9rem;
+ border: 2px solid white;
+ border-radius: 4px;
+ background: transparent;
+ color: white;
+ font-weight: 600;
+ cursor: pointer;
+ }
+ button:hover {
+ background: rgba(255, 255, 255, 0.2);
+ }
+ `,
+ ],
+})
+export class CardComponent {
+ theme = inject(ThemeService);
+}
diff --git a/lessons/dependency-injection/tasks/view-providers/src/app/theme.service.ts b/lessons/dependency-injection/tasks/view-providers/src/app/theme.service.ts
new file mode 100644
index 000000000..ad887be77
--- /dev/null
+++ b/lessons/dependency-injection/tasks/view-providers/src/app/theme.service.ts
@@ -0,0 +1,14 @@
+import { Injectable, signal } from '@angular/core';
+
+export const THEME_COLORS = ['blue', 'green', 'purple', 'orange'] as const;
+export type ThemeColor = (typeof THEME_COLORS)[number];
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+ readonly color = signal
+
+
+ CARD INTERNAL
+ ThemeService color: {{ theme.color() }}
+
+
+
+
+
+ PROJECTED CONTENT
+
+ `,
+ styles: [
+ `
+ .block {
+ padding: 1rem;
+ border: 3px solid;
+ border-radius: 6px;
+ background: white;
+ }
+ .label {
+ display: block;
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ color: #888;
+ margin-bottom: 0.4rem;
+ }
+ `,
+ ],
+})
+export class ThemedBlockComponent {
+ theme = inject(ThemeService);
+}
diff --git a/apps/angular/46-simple-animations/src/assets/.gitkeep b/lessons/dependency-injection/tasks/view-providers/src/assets/.gitkeep
similarity index 100%
rename from apps/angular/46-simple-animations/src/assets/.gitkeep
rename to lessons/dependency-injection/tasks/view-providers/src/assets/.gitkeep
diff --git a/apps/angular/5-crud-application/src/favicon.ico b/lessons/dependency-injection/tasks/view-providers/src/favicon.ico
similarity index 100%
rename from apps/angular/5-crud-application/src/favicon.ico
rename to lessons/dependency-injection/tasks/view-providers/src/favicon.ico
diff --git a/apps/testing/20-modal/src/index.html b/lessons/dependency-injection/tasks/view-providers/src/index.html
similarity index 87%
rename from apps/testing/20-modal/src/index.html
rename to lessons/dependency-injection/tasks/view-providers/src/index.html
index 362733ce1..2e5463a0d 100644
--- a/apps/testing/20-modal/src/index.html
+++ b/lessons/dependency-injection/tasks/view-providers/src/index.html
@@ -2,7 +2,7 @@
- + ThemeService color: {{ theme.color() }} +
+