chore: update deps to v20

apps/example-app-karma/eslint.config.mjs

@@ -1,8 +1,6 @@
 // @ts-check
 
-import tseslint from "typescript-eslint";
-import rootConfig from "../../eslint.config.mjs";
+import tseslint from 'typescript-eslint';
+import rootConfig from '../../eslint.config.mjs';
 
-export default tseslint.config(
-  ...rootConfig,
-);
+export default tseslint.config(...rootConfig);

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/angular';
@@ -45,13 +45,13 @@ it('should display invalid message and submit button must be disabled', async ()
   `,
 })
 class LoginComponent {
+  private fb = inject(FormBuilder);
+
   form: FormGroup = this.fb.group({
     email: ['', [Validators.required, Validators.email]],
     password: ['', [Validators.required, Validators.minLength(8)]],
   });
 
-  constructor(private fb: FormBuilder) {}
-
   get email(): FormControl {
     return this.form.get('email') as FormControl;
   }

apps/example-app-karma/src/app/issues/issue-491.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
@@ -43,7 +43,7 @@ it('test click event with router.navigate', async () => {
   `,
 })
 class LoginComponent {
-  constructor(private router: Router) {}
+  private readonly router = inject(Router);
   onSubmit(): void {
     this.router.navigate(['logged-in']);
   }

apps/example-app/eslint.config.mjs

@@ -1,8 +1,6 @@
 // @ts-check
 
-import tseslint from "typescript-eslint";
-import rootConfig from "../../eslint.config.mjs";
+import tseslint from 'typescript-eslint';
+import rootConfig from '../../eslint.config.mjs';
 
-export default tseslint.config(
-  ...rootConfig,
-);
+export default tseslint.config(...rootConfig);

apps/example-app/src/app/examples/03-forms.ts

@@ -1,5 +1,5 @@
 import { NgForOf, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
@@ -33,6 +33,8 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
   `,
 })
 export class FormsComponent {
+  private formBuilder = inject(FormBuilder);
+
   colors = [
     { id: 'R', value: 'Red' },
     { id: 'B', value: 'Blue' },
@@ -45,8 +47,6 @@ export class FormsComponent {
     color: [null as string | null, Validators.required],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   get formErrors() {
     return Object.keys(this.form.controls)
       .map((formKey) => {

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgForOf, NgIf } from '@angular/common';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -84,6 +84,8 @@ import { MatNativeDateModule } from '@angular/material/core';
   ],
 })
 export class MaterialFormsComponent {
+  private formBuilder = inject(FormBuilder);
+
   colors = [
     { id: 'R', value: 'Red' },
     { id: 'B', value: 'Blue' },
@@ -97,8 +99,6 @@ export class MaterialFormsComponent {
     agree: [false, Validators.requiredTrue],
   });
 
-  constructor(private formBuilder: FormBuilder) {}
-
   get colorControlDisplayValue(): string | undefined {
     const selectedId = this.form.get('color')?.value;
     return this.colors.filter((color) => color.id === selectedId)[0]?.value;

apps/example-app/src/app/examples/05-component-provider.ts

@@ -1,4 +1,4 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, inject, Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
@@ -30,5 +30,5 @@ export class CounterService {
   providers: [CounterService],
 })
 export class ComponentWithProviderComponent {
-  constructor(public counter: CounterService) {}
+  protected counter = inject(CounterService);
 }

apps/example-app/src/app/examples/06-with-ngrx-store.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store';
 
 const increment = createAction('increment');
@@ -26,8 +26,9 @@ const selectValue = createSelector(
   `,
 })
 export class WithNgRxStoreComponent {
+  private store = inject(Store);
+
   value = this.store.pipe(select(selectValue));
-  constructor(private store: Store<any>) {}
 
   increment() {
     this.store.dispatch(increment());

apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgForOf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { createSelector, Store, select } from '@ngrx/store';
 
 export const selectItems = createSelector(
@@ -20,8 +20,9 @@ export const selectItems = createSelector(
   `,
 })
 export class WithNgRxMockStoreComponent {
+  private store = inject(Store);
+
   items = this.store.pipe(select(selectItems));
-  constructor(private store: Store<any>) {}
 
   send(item: string) {
     this.store.dispatch({ type: '[Item List] send', item });

apps/example-app/src/app/examples/08-directive.ts

@@ -1,15 +1,15 @@
-import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';
+import { Directive, HostListener, ElementRef, Input, OnInit, inject } from '@angular/core';
 
 @Directive({
   standalone: true,
   selector: '[atlSpoiler]',
 })
 export class SpoilerDirective implements OnInit {
+  private el = inject(ElementRef);
+
   @Input() hidden = 'SPOILER';
   @Input() visible = 'I am visible now...';
 
-  constructor(private el: ElementRef) {}
-
   ngOnInit() {
     this.el.nativeElement.textContent = this.hidden;
   }

apps/example-app/src/app/examples/09-router.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
 import { map } from 'rxjs/operators';
 
@@ -32,10 +32,10 @@ export class RootComponent {}
   `,
 })
 export class DetailComponent {
+  private route = inject(ActivatedRoute);
   id = this.route.paramMap.pipe(map((params) => params.get('id')));
   text = this.route.queryParams.pipe(map((params) => params['text']));
   subtext = this.route.queryParams.pipe(map((params) => params['subtext']));
-  constructor(private route: ActivatedRoute) {}
 }
 
 @Component({

apps/example-app/src/app/examples/10-inject-token-dependency.ts

@@ -1,4 +1,4 @@
-import { Component, InjectionToken, Inject } from '@angular/core';
+import { Component, InjectionToken, inject } from '@angular/core';
 
 export const DATA = new InjectionToken<{ text: string }>('Components Data');
 
@@ -8,5 +8,5 @@ export const DATA = new InjectionToken<{ text: string }>('Components Data');
   template: ' {{ data.text }} ',
 })
 export class DataInjectedComponent {
-  constructor(@Inject(DATA) public data: { text: string }) {}
+  protected data = inject(DATA);
 }

apps/example-app/src/app/examples/12-service-component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgForOf } from '@angular/common';
-import { Component, Injectable } from '@angular/core';
+import { Component, inject, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
 export class Customer {
@@ -29,6 +29,6 @@ export class CustomersService {
   `,
 })
 export class CustomersComponent {
+  private service = inject(CustomersService);
   customers$ = this.service.load();
-  constructor(private service: CustomersService) {}
 }

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { MatDialogRef } from '@angular/material/dialog';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
@@ -10,8 +10,8 @@ test('dialog closes', async () => {
 
   const closeFn = jest.fn();
   await render(DialogContentComponent, {
-    imports: [NoopAnimationsModule],
     providers: [
+      provideNoopAnimations(),
       {
         provide: MatDialogRef,
         useValue: {
@@ -31,7 +31,7 @@ test('closes the dialog via the backdrop', async () => {
   const user = userEvent.setup();
 
   await render(DialogComponent, {
-    imports: [NoopAnimationsModule],
+    providers: [provideNoopAnimations()],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });
@@ -55,7 +55,7 @@ test('opens and closes the dialog with buttons', async () => {
   const user = userEvent.setup();
 
   await render(DialogComponent, {
-    imports: [NoopAnimationsModule],
+    providers: [provideNoopAnimations()],
   });
 
   const openDialogButton = await screen.findByRole('button', { name: /open dialog/i });

apps/example-app/src/app/examples/15-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
@@ -8,7 +8,7 @@ import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dial
   template: '<button (click)="openDialog()">Open dialog</button>',
 })
 export class DialogComponent {
-  constructor(public dialog: MatDialog) {}
+  private dialog = inject(MatDialog);
 
   openDialog(): void {
     this.dialog.open(DialogContentComponent);
@@ -29,7 +29,7 @@ export class DialogComponent {
   `,
 })
 export class DialogContentComponent {
-  constructor(public dialogRef: MatDialogRef<DialogContentComponent>) {}
+  private dialogRef = inject<MatDialogRef<DialogContentComponent>>(MatDialogRef);
 
   cancel(): void {
     this.dialogRef.close();

apps/example-app/src/app/examples/16-input-getter-setter.ts

@@ -8,7 +8,6 @@ import { Component, Input } from '@angular/core';
     <span data-testid="value-getter">{{ value }}</span>
   `,
 })
-// eslint-disable-next-line @angular-eslint/component-class-suffix
 export class InputGetterSetter {
   @Input() set value(value: string) {
     this.originalValue = value;

apps/example-app/src/app/examples/20-test-harness.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 
@@ -11,7 +11,7 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
   `,
 })
 export class HarnessComponent {
-  constructor(private snackBar: MatSnackBar) {}
+  private snackBar = inject(MatSnackBar);
 
   openSnackBar() {
     return this.snackBar.open('Pizza Party!!!');

apps/example-app/src/app/examples/23-host-directive.ts

@@ -1,13 +1,12 @@
-import { Component, Directive, ElementRef, input, OnInit } from '@angular/core';
+import { Component, Directive, ElementRef, inject, input, OnInit } from '@angular/core';
 
 @Directive({
   selector: '[atlText]',
 })
 export class TextDirective implements OnInit {
+  private el = inject(ElementRef);
   atlText = input<string>('');
 
-  constructor(private el: ElementRef) {}
-
   ngOnInit() {
     this.el.nativeElement.textContent = this.atlText();
   }