feat: finalize migration to Signals

Author: rainerhahnekamp

projects/example-app/src/app/app.config.ts

@@ -11,7 +11,11 @@ import { rootReducers, metaReducers } from '@example-app/reducers';
 
 import { APP_ROUTES } from '@example-app/app.routing';
 import { UserEffects, RouterEffects } from '@example-app/core/effects';
-import { provideRouter, withHashLocation } from '@angular/router';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withHashLocation,
+} from '@angular/router';
 import { AuthEffects } from './auth/effects';
 import { provideAuth } from '@example-app/auth/reducers';
 import { provideLayout } from '@example-app/core/reducers/layout.reducer';
@@ -20,7 +24,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideAnimationsAsync(),
     provideHttpClient(),
-    provideRouter(APP_ROUTES, withHashLocation()),
+    provideRouter(APP_ROUTES, withHashLocation(), withComponentInputBinding()),
 
     /**
      * provideStore() is imported once in the root providers, accepting a reducer

projects/example-app/src/app/app.routing.ts

@@ -6,14 +6,12 @@ import { NotFoundPageComponent } from '@example-app/core/containers';
 export const APP_ROUTES: Routes = [
   {
     path: 'login',
-    loadChildren: () =>
-      import('@example-app/auth/auth.routes').then((m) => m.AUTH_ROUTES),
+    loadChildren: () => import('@example-app/auth/auth.routes'),
   },
   { path: '', redirectTo: '/books', pathMatch: 'full' },
   {
     path: 'books',
-    loadChildren: () =>
-      import('@example-app/books/books.routes').then((m) => m.BOOKS_ROUTES),
+    loadChildren: () => import('@example-app/books/books.routes'),
     canActivate: [authGuard],
   },
   {

projects/example-app/src/app/auth/auth.routes.ts

@@ -1,10 +1,10 @@
 import { Routes } from '@angular/router';
 import { LoginPageComponent } from '@example-app/auth/containers';
 
-export const AUTH_ROUTES: Routes = [
+export default [
   {
     path: '',
     component: LoginPageComponent,
     data: { title: 'Login' },
   },
-];
+] satisfies Routes;

projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap

@@ -2,9 +2,11 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-form
-  errorMessage="null"
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
@@ -149,9 +151,11 @@ exports[`Login Page should compile 1`] = `
 
 exports[`Login Page should disable the form if pending 1`] = `
 <bc-login-form
-  errorMessage="null"
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"
@@ -165,16 +169,19 @@ exports[`Login Page should disable the form if pending 1`] = `
       class="mat-mdc-card-content"
     >
       <form
-        class="ng-untouched ng-pristine"
+        class="ng-untouched ng-pristine ng-valid"
         novalidate=""
       >
         <p>
           <mat-form-field
-            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
           >
             <div
-              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
             >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
               <div
                 class="mat-mdc-form-field-flex"
               >
@@ -184,7 +191,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                   <input
                     aria-invalid="false"
                     aria-required="false"
-                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
                     data-testid="username"
                     disabled=""
                     formcontrolname="username"
@@ -215,11 +222,14 @@ exports[`Login Page should disable the form if pending 1`] = `
         </p>
         <p>
           <mat-form-field
-            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-disabled mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine"
+            class="mat-mdc-form-field mat-mdc-form-field-type-mat-input mat-form-field-no-animations mat-form-field-appearance-fill mat-primary ng-untouched ng-pristine ng-valid"
           >
             <div
-              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--disabled"
+              class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label"
             >
+              <div
+                class="mat-mdc-form-field-focus-overlay"
+              />
               <div
                 class="mat-mdc-form-field-flex"
               >
@@ -229,7 +239,7 @@ exports[`Login Page should disable the form if pending 1`] = `
                   <input
                     aria-invalid="false"
                     aria-required="false"
-                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine cdk-text-field-autofill-monitored"
+                    class="mat-mdc-input-element mat-mdc-form-field-input-control mdc-text-field__input ng-untouched ng-pristine ng-valid cdk-text-field-autofill-monitored"
                     data-testid="password"
                     disabled=""
                     formcontrolname="password"
@@ -292,9 +302,11 @@ exports[`Login Page should disable the form if pending 1`] = `
 
 exports[`Login Page should display an error message if provided 1`] = `
 <bc-login-form
-  errorMessage={[Function String]}
+  errorMessage={[Function Function]}
   form={[Function FormGroup]}
-  submitted={[Function EventEmitter_]}
+  pending={[Function Function]}
+  pendingEffect={[Function EffectHandle]}
+  submitted={[Function OutputEmitterRef]}
 >
   <mat-card
     class="mat-mdc-card mdc-card"

projects/example-app/src/app/auth/components/login-form.component.spec.ts

@@ -16,6 +16,7 @@ describe('Login Page', () => {
     });
 
     fixture = TestBed.createComponent(LoginFormComponent);
+    fixture.componentRef.setInput('pending', false);
     instance = fixture.componentInstance;
   });
 
@@ -38,15 +39,15 @@ describe('Login Page', () => {
   });
 
   it('should disable the form if pending', () => {
-    instance.pending = true;
+    fixture.componentRef.setInput('pending', true);
 
     fixture.detectChanges();
 
     expect(fixture).toMatchSnapshot();
   });
 
   it('should display an error message if provided', () => {
-    instance.errorMessage = 'Invalid credentials';
+    fixture.componentRef.setInput('errorMessage', 'Invalid credentials');
 
     fixture.detectChanges();
 

projects/example-app/src/app/auth/components/login-form.component.ts

@@ -1,4 +1,13 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  input,
+  untracked,
+  effect,
+  output,
+} from '@angular/core';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Credentials } from '@example-app/auth/models';
 import { MaterialModule } from '@example-app/material';
@@ -36,9 +45,9 @@ import { MaterialModule } from '@example-app/material';
             </mat-form-field>
           </p>
 
-          @if (errorMessage) {
+          @if (errorMessage()) {
           <p class="login-error">
-            {{ errorMessage }}
+            {{ errorMessage() }}
           </p>
           }
 
@@ -87,18 +96,17 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class LoginFormComponent {
-  @Input()
-  set pending(isPending: boolean) {
-    if (isPending) {
-      this.form.disable();
-    } else {
-      this.form.enable();
-    }
-  }
+  readonly pending = input.required<boolean>();
+
+  private readonly pendingEffect = effect(() => {
+    const pending = this.pending();
+
+    untracked(() => (pending ? this.form.disable() : this.form.enable()));
+  });
 
-  @Input() errorMessage: string | null = null;
+  readonly errorMessage = input<string | null>(null);
 
-  @Output() submitted = new EventEmitter<Credentials>();
+  submitted = output<Credentials>();
 
   protected readonly form: FormGroup = new FormGroup({
     username: new FormControl('ngrx'),

projects/example-app/src/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap

@@ -2,9 +2,9 @@
 
 exports[`Login Page should compile 1`] = `
 <bc-login-page
-  error$={[Function _Store]}
-  pending$={[Function _Store]}
-  store={[Function _MockStore]}
+  error={[Function Function]}
+  pending={[Function Function]}
+  store={[Function MockStore]}
 >
   <bc-login-form>
     <mat-card

projects/example-app/src/app/auth/containers/login-page.component.spec.ts

@@ -52,7 +52,7 @@ describe('Login Page', () => {
   });
 
   it('should dispatch a login event on submit', () => {
-    const credentials: any = {};
+    const credentials = { username: 'ngrx', password: 'rocks' };
     const action = LoginPageActions.login({ credentials });
 
     instance.onSubmit(credentials);

projects/example-app/src/app/auth/containers/login-page.component.ts

@@ -13,20 +13,21 @@ import { AsyncPipe } from '@angular/common';
   template: `
     <bc-login-form
       (submitted)="onSubmit($event)"
-      [pending]="(pending$ | async)!"
-      [errorMessage]="error$ | async"
+      [pending]="pending()"
+      [errorMessage]="error()"
     >
     </bc-login-form>
   `,
-  styles: [],
 })
 export class LoginPageComponent {
-  private store = inject(Store);
+  private readonly store = inject(Store);
 
-  protected readonly pending$ = this.store.select(
+  protected readonly pending = this.store.selectSignal(
     fromAuth.selectLoginPagePending
   );
-  protected readonly error$ = this.store.select(fromAuth.selectLoginPageError);
+  protected readonly error = this.store.selectSignal(
+    fromAuth.selectLoginPageError
+  );
 
   onSubmit(credentials: Credentials) {
     this.store.dispatch(LoginPageActions.login({ credentials }));

projects/example-app/src/app/books/books.routes.ts

@@ -8,7 +8,7 @@ import {
 import { bookExistsGuard } from '@example-app/books/guards';
 import { provideBooks } from '@example-app/books/reducers';
 
-export const BOOKS_ROUTES: Routes = [
+export default [
   {
     path: '',
     providers: [provideBooks()],
@@ -31,4 +31,4 @@ export const BOOKS_ROUTES: Routes = [
       },
     ],
   },
-];
+] satisfies Routes;