@@ -28,7 +34,7 @@ import {
type="text"
formControlName="name"
placeholder="Enter your name"
- class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+ class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
[class.border-red-500]="
form.controls.name.invalid && !form.controls.name.untouched
" />
@@ -48,7 +54,7 @@ import {
type="text"
formControlName="lastname"
placeholder="Enter your last name"
- class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
+ class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
@@ -64,7 +70,7 @@ import {
placeholder="Enter your age (1-99)"
min="1"
max="99"
- class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+ class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
[class.border-red-500]="
form.controls.age.invalid && !form.controls.age.untouched
" />
@@ -91,7 +97,7 @@ import {
type="text"
formControlName="note"
placeholder="Enter a note"
- class="w-full rounded-md border border-gray-300 px-4 py-2 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
+ class="w-full rounded-md border border-gray-300 px-4 py-2 transition outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500" />
diff --git a/apps/forms/61-simplest-signal-form/tsconfig.app.json b/apps/forms/61-simplest-signal-form/tsconfig.app.json
index ba6acbecd..b321bd07a 100644
--- a/apps/forms/61-simplest-signal-form/tsconfig.app.json
+++ b/apps/forms/61-simplest-signal-form/tsconfig.app.json
@@ -5,5 +5,13 @@
"types": []
},
"include": ["src/**/*.ts"],
- "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+ "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/forms/62-crossfield-validation-signal-form/tsconfig.app.json b/apps/forms/62-crossfield-validation-signal-form/tsconfig.app.json
index ea5509a27..8f5ee17df 100644
--- a/apps/forms/62-crossfield-validation-signal-form/tsconfig.app.json
+++ b/apps/forms/62-crossfield-validation-signal-form/tsconfig.app.json
@@ -11,5 +11,13 @@
"jest.config.ts",
"jest.config.cts",
"src/test-setup.ts"
- ]
+ ],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/forms/63-child-forms/tsconfig.app.json b/apps/forms/63-child-forms/tsconfig.app.json
index ba6acbecd..b321bd07a 100644
--- a/apps/forms/63-child-forms/tsconfig.app.json
+++ b/apps/forms/63-child-forms/tsconfig.app.json
@@ -5,5 +5,13 @@
"types": []
},
"include": ["src/**/*.ts"],
- "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+ "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/forms/64-form-array/src/app/contact-form.component.ts b/apps/forms/64-form-array/src/app/contact-form.component.ts
index eaf27cd02..cb681bcdd 100644
--- a/apps/forms/64-form-array/src/app/contact-form.component.ts
+++ b/apps/forms/64-form-array/src/app/contact-form.component.ts
@@ -1,4 +1,9 @@
-import { Component, input, output } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ input,
+ output,
+} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
type ContactFormGroup = FormGroup<{
@@ -11,6 +16,7 @@ type ContactFormGroup = FormGroup<{
@Component({
selector: 'app-contact-form',
imports: [ReactiveFormsModule],
+ changeDetection: ChangeDetectionStrategy.Eager,
template: `
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
host: {
class: 'flex flex-col',
},
diff --git a/apps/nx/42-static-vs-dynamic-import/tsconfig.app.json b/apps/nx/42-static-vs-dynamic-import/tsconfig.app.json
index 8b5631268..e4073fab3 100644
--- a/apps/nx/42-static-vs-dynamic-import/tsconfig.app.json
+++ b/apps/nx/42-static-vs-dynamic-import/tsconfig.app.json
@@ -7,5 +7,13 @@
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/performance/12-optimize-change-detection/src/app/app.component.ts b/apps/performance/12-optimize-change-detection/src/app/app.component.ts
index 52b7fa855..d22dcab39 100644
--- a/apps/performance/12-optimize-change-detection/src/app/app.component.ts
+++ b/apps/performance/12-optimize-change-detection/src/app/app.component.ts
@@ -1,4 +1,9 @@
-import { Component, HostListener, signal } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ HostListener,
+ signal,
+} from '@angular/core';
@Component({
selector: 'app-root',
@@ -10,6 +15,7 @@ import { Component, HostListener, signal } from '@angular/core';
}
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
styles: [
`
:host {
diff --git a/apps/performance/12-optimize-change-detection/tsconfig.app.json b/apps/performance/12-optimize-change-detection/tsconfig.app.json
index 8b5631268..e4073fab3 100644
--- a/apps/performance/12-optimize-change-detection/tsconfig.app.json
+++ b/apps/performance/12-optimize-change-detection/tsconfig.app.json
@@ -7,5 +7,13 @@
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/performance/34-default-vs-onpush/src/app/app.component.ts b/apps/performance/34-default-vs-onpush/src/app/app.component.ts
index 88b0a6571..cdef49de9 100644
--- a/apps/performance/34-default-vs-onpush/src/app/app.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { randFirstName } from '@ngneat/falso';
import { PersonListComponent } from './person-list.component';
import { RandomComponent } from './random.component';
@@ -6,6 +6,7 @@ import { RandomComponent } from './random.component';
@Component({
imports: [PersonListComponent, RandomComponent],
selector: 'app-root',
+ changeDetection: ChangeDetectionStrategy.Eager,
template: `
diff --git a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts b/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
index e34a39e87..dc81b888e 100644
--- a/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/person-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
import { TitleCasePipe } from '@angular/common';
@@ -51,6 +51,7 @@ import { MatListModule } from '@angular/material/list';
}
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
host: {
class: 'w-full flex flex-col items-center',
},
diff --git a/apps/performance/34-default-vs-onpush/src/app/random.component.ts b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
index 71479e28d..bd118765d 100644
--- a/apps/performance/34-default-vs-onpush/src/app/random.component.ts
+++ b/apps/performance/34-default-vs-onpush/src/app/random.component.ts
@@ -1,11 +1,12 @@
import { CDFlashingDirective } from '@angular-challenges/shared/directives';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-random',
template: `
I do nothing but I'm here
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
imports: [CDFlashingDirective],
})
export class RandomComponent {}
diff --git a/apps/performance/34-default-vs-onpush/tsconfig.app.json b/apps/performance/34-default-vs-onpush/tsconfig.app.json
index 8b5631268..e4073fab3 100644
--- a/apps/performance/34-default-vs-onpush/tsconfig.app.json
+++ b/apps/performance/34-default-vs-onpush/tsconfig.app.json
@@ -7,5 +7,13 @@
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/performance/35-memoization/src/app/app.component.ts b/apps/performance/35-memoization/src/app/app.component.ts
index 44e55db4f..a892525df 100644
--- a/apps/performance/35-memoization/src/app/app.component.ts
+++ b/apps/performance/35-memoization/src/app/app.component.ts
@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { generateList } from './generateList';
import { PersonListComponent } from './person-list.component';
@Component({
imports: [PersonListComponent],
selector: 'app-root',
+ changeDetection: ChangeDetectionStrategy.Eager,
template: `
Performance is key!!
}
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
host: {
class: 'w-full flex flex-col',
},
diff --git a/apps/performance/36-ngfor-optimization/tsconfig.app.json b/apps/performance/36-ngfor-optimization/tsconfig.app.json
index 8b5631268..e4073fab3 100644
--- a/apps/performance/36-ngfor-optimization/tsconfig.app.json
+++ b/apps/performance/36-ngfor-optimization/tsconfig.app.json
@@ -7,5 +7,13 @@
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/performance/37-optimize-big-list/src/app/app.component.ts b/apps/performance/37-optimize-big-list/src/app/app.component.ts
index a5f121b22..2f8b2322c 100644
--- a/apps/performance/37-optimize-big-list/src/app/app.component.ts
+++ b/apps/performance/37-optimize-big-list/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
@@ -26,6 +26,7 @@ import { PersonListComponent } from './person-list.component';
}
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
host: {
class: 'flex items-center flex-col gap-5',
},
diff --git a/apps/performance/37-optimize-big-list/tsconfig.app.json b/apps/performance/37-optimize-big-list/tsconfig.app.json
index 8b5631268..e4073fab3 100644
--- a/apps/performance/37-optimize-big-list/tsconfig.app.json
+++ b/apps/performance/37-optimize-big-list/tsconfig.app.json
@@ -7,5 +7,13 @@
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
- "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+ "angularCompilerOptions": {
+ "extendedDiagnostics": {
+ "checks": {
+ "nullishCoalescingNotNullable": "suppress",
+ "optionalChainNotNullable": "suppress"
+ }
+ }
+ }
}
diff --git a/apps/performance/40-web-workers/src/app/app.component.ts b/apps/performance/40-web-workers/src/app/app.component.ts
index da63f1012..95079623d 100644
--- a/apps/performance/40-web-workers/src/app/app.component.ts
+++ b/apps/performance/40-web-workers/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { HeavyCalculationService } from './heavy-calculation.service';
import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
@@ -15,6 +15,7 @@ import { UnknownPersonComponent } from './unknown-person/unknown-person.componen
Progress: {{ loadingPercentage() }}%
`,
+ changeDetection: ChangeDetectionStrategy.Eager,
host: {
class: `flex flex-col h-screen w-screen bg-[#1f75c0]`,
},
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
index 600724281..21774444a 100644
--- 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
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
@@ -9,7 +9,7 @@ import { Component, input } from '@angular/core';
[style.height.%]="100 - step()">
@if (step() !== 100) {
+ class="relative top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
Who is here?
}
@@ -29,6 +29,7 @@ import { Component, input } from '@angular/core';