docs: first step towards signals

Author: rainerhahnekamp

projects/example-app/src/app/core/components/nav-item.component.ts

@@ -1,4 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  input,
+  output,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MaterialModule } from '@example-app/material';
 
@@ -7,11 +14,11 @@ import { MaterialModule } from '@example-app/material';
   selector: 'bc-nav-item',
   imports: [MaterialModule, RouterLink],
   template: `
-    <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
-      <mat-icon matListItemIcon>{{ icon }}</mat-icon>
+    <a mat-list-item [routerLink]="routerLink()" (click)="navigate.emit()">
+      <mat-icon matListItemIcon>{{ icon() }}</mat-icon>
       <div matListItemTitle><ng-content></ng-content></div>
-      @if (hint) {
-      <div matListItemLine>{{ hint }}</div>
+      @if (hint()) {
+      <div matListItemLine>{{ hint() }}</div>
       }
     </a>
   `,
@@ -24,8 +31,9 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class NavItemComponent {
-  @Input() icon = '';
-  @Input() hint = '';
-  @Input() routerLink: string | any[] = '/';
-  @Output() navigate = new EventEmitter<void>();
+  icon = input('');
+  hint = input('');
+  routerLink = input<string | unknown[]>('/');
+
+  navigate = output<void>();
 }

projects/example-app/src/app/core/components/sidenav.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  input,
+  Input,
+  output,
+  Output,
+} from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
@@ -8,7 +15,7 @@ import { MaterialModule } from '@example-app/material';
   template: `
     <mat-sidenav
       #sidenav
-      [opened]="open"
+      [opened]="open()"
       (keydown.escape)="sidenav.close()"
       (closedStart)="closeMenu.emit()"
       disableClose
@@ -27,6 +34,6 @@ import { MaterialModule } from '@example-app/material';
   ],
 })
 export class SidenavComponent {
-  @Input() open = false;
-  @Output() closeMenu = new EventEmitter<void>();
+  open = input(false);
+  closeMenu = output<void>();
 }

projects/example-app/src/app/core/components/toolbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, output } from '@angular/core';
 import { MaterialModule } from '@example-app/material';
 
 @Component({
@@ -15,5 +15,5 @@ import { MaterialModule } from '@example-app/material';
   `,
 })
 export class ToolbarComponent {
-  @Output() openMenu = new EventEmitter<void>();
+  openMenu = output<void>();
 }

projects/example-app/src/app/core/containers/app.component.ts

@@ -31,8 +31,8 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
   ],
   template: `
     <bc-layout>
-      <bc-sidenav [open]="(showSidenav$ | async)!" (closeMenu)="closeSidenav()">
-        @if (loggedIn$ | async) {
+      <bc-sidenav [open]="showSidenav()" (closeMenu)="closeSidenav()">
+        @if (loggedIn()) {
         <bc-nav-item
           (navigate)="closeSidenav()"
           routerLink="/"
@@ -41,7 +41,6 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
         >
           My Collection
         </bc-nav-item>
-        } @if (loggedIn$ | async) {
         <bc-nav-item
           (navigate)="closeSidenav()"
           routerLink="/books/find"
@@ -50,13 +49,13 @@ import { selectShowSidenav } from '../reducers/layout.reducer';
         >
           Browse Books
         </bc-nav-item>
-        } @if ((loggedIn$ | async) === false) {
-        <bc-nav-item (navigate)="closeSidenav()"> Sign In </bc-nav-item>
-        } @if (loggedIn$ | async) {
-        <bc-nav-item (navigate)="logout()"> Sign Out </bc-nav-item>
+        } @if (!loggedIn()) {
+        <bc-nav-item (navigate)="closeSidenav()"> Sign In</bc-nav-item>
+        } @if (loggedIn()) {
+        <bc-nav-item (navigate)="logout()"> Sign Out</bc-nav-item>
         }
       </bc-sidenav>
-      <bc-toolbar (openMenu)="openSidenav()"> Book Collection </bc-toolbar>
+      <bc-toolbar (openMenu)="openSidenav()"> Book Collection</bc-toolbar>
 
       <router-outlet></router-outlet>
     </bc-layout>
@@ -69,8 +68,10 @@ export class AppComponent {
    * Selectors can be applied with the `select` operator which passes the state
    * tree to the provided selector
    */
-  protected readonly showSidenav$ = this.store.select(selectShowSidenav);
-  protected readonly loggedIn$ = this.store.select(fromAuth.selectLoggedIn);
+  protected readonly showSidenav = this.store.selectSignal(selectShowSidenav);
+  protected readonly loggedIn = this.store.selectSignal(
+    fromAuth.selectLoggedIn
+  );
 
   closeSidenav() {
     /**