chore(demo app): cleanup appearance and other code

apps/demo/src/app/app.component.html

@@ -1,31 +1,32 @@
 <mat-toolbar color="primary">
   <span>NgRx Toolkit Demo</span>
 </mat-toolbar>
-<mat-drawer-container class="container">
+<mat-drawer-container>
   <mat-drawer mode="side" opened>
     <mat-nav-list>
       <a mat-list-item routerLink="/todo">DevTools</a>
+      <a mat-list-item routerLink="/flight-search-redux-connector"
+        >Redux Connector</a
+      >
       <a mat-list-item routerLink="/flight-search">withRedux</a>
+      <a mat-list-item routerLink="/conditional">withConditional</a>
+
       <a mat-list-item routerLink="/flight-search-data-service-simple"
         >withDataService (Simple)</a
       >
       <a mat-list-item routerLink="/flight-search-data-service-dynamic"
         >withDataService (Dynamic)</a
       >
+      <a mat-list-item routerLink="/immutable-state">withImmutableState</a>
+      <a mat-list-item routerLink="/feature-factory">withFeatureFactory</a>
       <a mat-list-item routerLink="/flight-search-with-pagination"
         >withPagination</a
       >
-      <a mat-list-item routerLink="/flight-search-redux-connector"
-        >Redux Connector</a
-      >
+      <a mat-list-item routerLink="/reset">withReset</a>
       <a mat-list-item routerLink="/todo-storage-sync">withStorageSync</a>
       <a mat-list-item routerLink="/todo-indexeddb-sync"
         >withStorageSync(IndexedDB)</a
       >
-      <a mat-list-item routerLink="/reset">withReset</a>
-      <a mat-list-item routerLink="/immutable-state">withImmutableState</a>
-      <a mat-list-item routerLink="/feature-factory">withFeatureFactory</a>
-      <a mat-list-item routerLink="/conditional">withConditional</a>
     </mat-nav-list>
   </mat-drawer>
   <mat-drawer-content>

apps/demo/src/app/app.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
@@ -22,19 +21,18 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     MatListModule,
     RouterLink,
     RouterOutlet,
-    CommonModule,
     MatToolbarModule,
     MatDrawer,
     MatDrawerContainer,
     MatDrawerContent,
   ],
   styles: `
-    .container {
-      display: inline;
-    }
     .content {
       margin: 4em;
     }
+    mat-drawer-container {
+      height: 100%;
+    }
   `,
 })
 export class AppComponent {}

apps/demo/src/app/core/sidebar/sidebar.component.ts

@@ -1,5 +1,5 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -13,12 +13,12 @@ import { map, shareReplay } from 'rxjs';
   selector: 'demo-sidebar-cmp',
   imports: [
     RouterModule,
-    CommonModule,
     MatToolbarModule,
     MatButtonModule,
     MatSidenavModule,
     MatIconModule,
     MatListModule,
+    AsyncPipe,
   ],
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.css'],

apps/demo/src/app/devtools/todo-detail.component.ts

@@ -46,14 +46,16 @@ const TodoDetailStore = signalStore(
 
 @Component({
   selector: 'demo-todo-detail',
-  template: ` <section [attr.aria-label]="todo().name">
-    <mat-card>
-      <mat-card-title>{{ todo().name }}</mat-card-title>
-      <mat-card-content>
-        <textarea>{{ todo().description }}</textarea>
-      </mat-card-content>
-    </mat-card>
-  </section>`,
+  template: `
+    <section [attr.aria-label]="todo().name">
+      <mat-card>
+        <mat-card-title>{{ todo().name }}</mat-card-title>
+        <mat-card-content>
+          <textarea>{{ todo().description }}</textarea>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
   imports: [MatCardModule],
   providers: [TodoDetailStore],
   styles: `

apps/demo/src/app/devtools/todo.component.ts

@@ -11,17 +11,18 @@ import { TodoStore } from './todo-store';
 @Component({
   selector: 'demo-todo',
   template: `
+    <h2>Todo List (DevTools)</h2>
+
     <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
       <!-- Checkbox Column -->
       <ng-container matColumnDef="finished">
-        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef />
         <mat-cell *matCellDef="let row" class="actions">
           <mat-checkbox
             (click)="$event.stopPropagation()"
             (change)="checkboxLabel(row)"
             [checked]="row.finished"
-          >
-          </mat-checkbox>
+          />
           <mat-icon (click)="removeTodo(row)">delete</mat-icon>
         </mat-cell>
       </ng-container>
@@ -42,16 +43,16 @@ import { TodoStore } from './todo-store';
         </mat-cell>
       </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-header-row *matHeaderRowDef="displayedColumns" />
       <mat-row
         *matRowDef="let row; columns: displayedColumns"
         (click)="selection.toggle(row)"
-      ></mat-row>
+      />
     </mat-table>
 
     <div class="details">
       @for (todo of todoStore.selectedTodos(); track todo) {
-        <demo-todo-detail [todo]="todo"></demo-todo-detail>
+        <demo-todo-detail [todo]="todo" />
       }
     </div>
   `,
@@ -77,7 +78,7 @@ import { TodoStore } from './todo-store';
 export class TodoComponent {
   todoStore = inject(TodoStore);
 
-  displayedColumns: string[] = ['finished', 'name', 'deadline'];
+  displayedColumns = ['finished', 'name', 'deadline'] as const;
   dataSource = new MatTableDataSource<Todo>([]);
   selection = new SelectionModel<Todo>(true, []);
 

apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts

@@ -1,34 +1,31 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, inject, input, viewChild } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { Flight } from '../shared/flight';
 import { FlightBookingStore } from './flight-booking.store';
 
 @Component({
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [RouterModule, FormsModule],
   selector: 'demo-flight-edit',
   templateUrl: './flight-edit.component.html',
 })
 export class FlightEditDynamicComponent implements OnInit {
-  @ViewChild(NgForm)
-  private form!: NgForm;
+  private readonly form = viewChild.required(NgForm);
 
   private store = inject(FlightBookingStore);
 
   current = this.store.currentFlight;
   loading = this.store.flightLoading;
   error = this.store.flightError;
 
-  @Input({ required: true })
-  id = '';
+  readonly id = input.required<string>();
 
   ngOnInit(): void {
-    this.store.loadFlightById(this.id);
+    this.store.loadFlightById(this.id());
   }
 
   async save() {
-    const flight = this.form.value as Flight;
+    const flight = this.form().value as Flight;
     if (flight.id) {
       await this.store.updateFlight(flight);
     } else {
@@ -41,6 +38,6 @@ export class FlightEditDynamicComponent implements OnInit {
   }
 
   async deleteFlight() {
-    await this.store.deleteFlight(this.form.value);
+    await this.store.deleteFlight(this.form().value);
   }
 }

apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.html

@@ -47,24 +47,27 @@ <h2 class="title">Flight Search (Dynamic)</h2>
 </form>
 
 <div>
-  <b *ngIf="loading()">Loading ...</b>
+  @if (loading()) {
+    <b>Loading ...</b>
+  }
 </div>
 
 <div class="row">
-  <div
-    *ngFor="let f of flights()"
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3"
-  >
-    <demo-flight-card
-      [item]="f"
-      [selected]="selectedIds()[f.id]"
-      (selectedChange)="updateBasket(f.id, $event)"
-    >
-      <a class="btn btn-default" [routerLink]="['../flight-edit-dynamic', f.id]"
-        >Edit</a
+  @for (f of flights(); track f) {
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
+      <demo-flight-card
+        [item]="f"
+        [selected]="selectedIds()[f.id]"
+        (selectedChange)="updateBasket(f.id, $event)"
       >
-    </demo-flight-card>
-  </div>
+        <a
+          class="btn btn-default"
+          [routerLink]="['../flight-edit-dynamic', f.id]"
+          >Edit</a
+        >
+      </demo-flight-card>
+    </div>
+  }
 </div>
 
 <pre>{{ selected() | json }}</pre>

apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts

@@ -1,19 +1,12 @@
-import { JsonPipe, NgForOf, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { FlightCardComponent } from '../shared/flight-card.component';
 import { FlightBookingStore } from './flight-booking.store';
 
 @Component({
-  imports: [
-    NgIf,
-    NgForOf,
-    JsonPipe,
-    FormsModule,
-    FlightCardComponent,
-    RouterLink,
-  ],
+  imports: [JsonPipe, FormsModule, FlightCardComponent, RouterLink],
   selector: 'demo-flight-search',
   templateUrl: './flight-search.component.html',
 })

apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.html

@@ -1,4 +1,4 @@
-<h1 class="title">Flight Edit (Simple)</h1>
+<h2 class="title">Flight Edit (Simple)</h2>
 
 @if (loading()) {
   <div class="status">One moment please ...</div>
@@ -7,18 +7,35 @@ <h1 class="title">Flight Edit (Simple)</h1>
   <h2 class="error">Error: {{ error() }}</h2>
 }
 @if (current()) {
+  <!-- TODO - button types & form action (unsure if new vs save can both be submit) -->
   <form>
-    <div>
-      <input [ngModel]="current().id" name="id" />
-      <input [ngModel]="current().from" name="from" />
-      <input [ngModel]="current().to" name="to" />
-      <input [ngModel]="current().date" name="date" />
-      <input [ngModel]="current().delayed" name="delayed" type="checkbox" />
+    <div id="fields">
+      <mat-form-field>
+        <mat-label>ID:</mat-label>
+        <input [ngModel]="current().id" name="id" matInput />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>From:</mat-label>
+        <input [ngModel]="current().from" name="from" matInput />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>To:</mat-label>
+        <input [ngModel]="current().to" name="to" matInput />
+      </mat-form-field>
+      <mat-form-field>
+        <mat-label>Date:</mat-label>
+        <input [ngModel]="current().date" name="date" matInput />
+      </mat-form-field>
+      <mat-checkbox [ngModel]="current().delayed" name="delayed">
+        Delayed
+      </mat-checkbox>
     </div>
-    <div>
-      <button (click)="createNew()">New</button>
-      <button (click)="save()">Save</button>
-      <button (click)="deleteFlight()">Delete</button>
+    <div id="buttons">
+      <button (click)="createNew()" mat-raised-button type="button">New</button>
+      <button (click)="save()" mat-raised-button type="button">Save</button>
+      <button (click)="deleteFlight()" mat-raised-button type="button">
+        Delete
+      </button>
     </div>
   </form>
 }