-
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 }}
- }
- }
- Введите корректный email
+}
+
+
+@if (email.invalid) {
+ Введите корректный email
+}
+```
+
+Но это еще не всё! Angular автоматически добавляет и убирает CSS-классы на элементе формы, отражая его состояние. Вам не нужно делать это вручную:
+
+```
+ng-valid / ng-invalid
+ng-pristine / ng-dirty
+ng-touched / ng-untouched
+```
+
+Это позволяет стилизовать поля декларативно:
+
+```css
+/* Красная рамка только на полях, которые пользователь тронул и заполнил неверно */
+input.ng-invalid.ng-touched {
+ border-color: red;
+}
+
+/* Зелёная рамка для корректно заполненных полей */
+input.ng-valid.ng-dirty {
+ border-color: green;
+}
+```
diff --git a/apps/nx/42-static-vs-dynamic-import/README.md b/apps/nx/42-static-vs-dynamic-import/README.md
deleted file mode 100644
index a08abaa82..000000000
--- a/apps/nx/42-static-vs-dynamic-import/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Static vs Dynamic Import
-
-> author: thomas-laforge
-
-### Run Application
-
-```bash
-npx nx serve nx-static-vs-dynamic-import
-```
-
-### Documentation and Instruction
-
-Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/nx/42-static-dynamic-import/).
diff --git a/apps/nx/42-static-vs-dynamic-import/project.json b/apps/nx/42-static-vs-dynamic-import/project.json
deleted file mode 100644
index 68332bbc6..000000000
--- a/apps/nx/42-static-vs-dynamic-import/project.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
- "name": "nx-static-vs-dynamic-import",
- "$schema": "../../../node_modules/nx/schemas/project-schema.json",
- "projectType": "application",
- "prefix": "app",
- "sourceRoot": "apps/nx/42-static-vs-dynamic-import/src",
- "tags": [],
- "targets": {
- "build": {
- "executor": "@angular-devkit/build-angular:application",
- "outputs": ["{options.outputPath}"],
- "options": {
- "outputPath": "dist/apps/nx/42-static-vs-dynamic-import",
- "index": "apps/nx/42-static-vs-dynamic-import/src/index.html",
- "browser": "apps/nx/42-static-vs-dynamic-import/src/main.ts",
- "polyfills": ["zone.js"],
- "tsConfig": "apps/nx/42-static-vs-dynamic-import/tsconfig.app.json",
- "inlineStyleLanguage": "scss",
- "assets": [
- "apps/nx/42-static-vs-dynamic-import/src/favicon.ico",
- "apps/nx/42-static-vs-dynamic-import/src/assets"
- ],
- "styles": [
- "apps/nx/42-static-vs-dynamic-import/src/styles.scss",
- "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
- ],
- "scripts": []
- },
- "configurations": {
- "production": {
- "budgets": [
- {
- "type": "initial",
- "maximumWarning": "500kb",
- "maximumError": "1mb"
- },
- {
- "type": "anyComponentStyle",
- "maximumWarning": "2kb",
- "maximumError": "4kb"
- }
- ],
- "outputHashing": "all",
- "sourceMap": true
- },
- "development": {
- "optimization": false,
- "extractLicenses": false,
- "sourceMap": true
- }
- },
- "defaultConfiguration": "production"
- },
- "serve": {
- "executor": "@angular-devkit/build-angular:dev-server",
- "configurations": {
- "production": {
- "buildTarget": "nx-static-vs-dynamic-import:build:production"
- },
- "development": {
- "buildTarget": "nx-static-vs-dynamic-import:build:development"
- }
- },
- "defaultConfiguration": "development",
- "continuous": true
- },
- "extract-i18n": {
- "executor": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "buildTarget": "nx-static-vs-dynamic-import:build"
- }
- }
- }
-}
diff --git a/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts b/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts
deleted file mode 100644
index 59be617e8..000000000
--- a/apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
- UserComponent,
- type User,
-} from '@angular-challenges/static-dynamic-import/users';
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
- imports: [UserComponent, RouterOutlet],
- selector: 'app-root',
- template: `
- Author:
-
-
- `,
- 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/index.html b/apps/testing/20-modal/src/index.html
deleted file mode 100644
index 362733ce1..000000000
--- a/apps/testing/20-modal/src/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- 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() }}
-