diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
index 580cbf4e..4e2e9c3c 100644
--- a/apps/demo/src/app/app.component.html
+++ b/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>
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
index 3437c545..a5d408fa 100644
--- a/apps/demo/src/app/app.component.ts
+++ b/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 {}
diff --git a/apps/demo/src/app/core/sidebar/sidebar.component.ts b/apps/demo/src/app/core/sidebar/sidebar.component.ts
index 25034ee8..c3f3a92d 100644
--- a/apps/demo/src/app/core/sidebar/sidebar.component.ts
+++ b/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'],
diff --git a/apps/demo/src/app/devtools/todo-detail.component.ts b/apps/demo/src/app/devtools/todo-detail.component.ts
index 0234642e..9f3efd7a 100644
--- a/apps/demo/src/app/devtools/todo-detail.component.ts
+++ b/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: `
diff --git a/apps/demo/src/app/devtools/todo.component.ts b/apps/demo/src/app/devtools/todo.component.ts
index abbefcfc..0a40d10e 100644
--- a/apps/demo/src/app/devtools/todo.component.ts
+++ b/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, []);
 
diff --git a/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts b/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts
index 74cb5456..04924468 100644
--- a/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts
+++ b/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts
@@ -1,18 +1,16 @@
-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);
 
@@ -20,15 +18,14 @@ export class FlightEditDynamicComponent implements OnInit {
   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);
   }
 }
diff --git a/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.html b/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.html
index 39035ade..e9ea8352 100644
--- a/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.html
+++ b/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>
diff --git a/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts b/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts
index a674e506..173366f6 100644
--- a/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts
+++ b/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts
@@ -1,4 +1,4 @@
-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';
@@ -6,14 +6,7 @@ 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',
 })
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.html b/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.html
index d03ad8de..76548c42 100644
--- a/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.html
+++ b/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>
 }
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts b/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts
index 4a8177ea..96a132cb 100644
--- a/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts
+++ b/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts
@@ -1,34 +1,53 @@
-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 { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { RouterModule } from '@angular/router';
 import { Flight } from '../shared/flight';
 import { SimpleFlightBookingStore } from './flight-booking-simple.store';
 
 @Component({
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [
+    RouterModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+  ],
   selector: 'demo-flight-edit-simple',
   templateUrl: './flight-edit-simple.component.html',
+  styles: `
+    #fields {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    #buttons {
+      display: flex;
+      gap: 5px;
+    }
+  `,
 })
 export class FlightEditSimpleComponent implements OnInit {
-  @ViewChild(NgForm)
-  private form!: NgForm;
-
   private store = inject(SimpleFlightBookingStore);
 
+  private readonly form = viewChild.required(NgForm);
+
   current = this.store.current;
   loading = this.store.loading;
   error = this.store.error;
 
-  @Input({ required: true })
-  id = '';
+  readonly id = input.required<string>();
 
   ngOnInit(): void {
-    this.store.loadById(this.id);
+    this.store.loadById(this.id());
   }
 
   async save() {
-    const flight = this.form.value as Flight;
+    const flight = this.form().value as Flight;
     if (flight.id) {
       await this.store.update(flight);
     } else {
@@ -41,6 +60,6 @@ export class FlightEditSimpleComponent implements OnInit {
   }
 
   async deleteFlight() {
-    await this.store.delete(this.form.value);
+    await this.store.delete(this.form().value);
   }
 }
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.html b/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.html
index 130a6fa7..19c81fa7 100644
--- a/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.html
+++ b/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.html
@@ -1,75 +1,89 @@
 <h2 class="title">Flight Search (Simple)</h2>
 
-<form #form="ngForm">
+<form #form="ngForm" (ngSubmit)="search()">
   <div class="form-group">
-    <label
-      >From:
+    <mat-form-field>
+      <mat-label>From:</mat-label>
       <input
         #fromField
         [ngModel]="from()"
         (ngModelChange)="updateCriteria($event, toField.value)"
         name="from"
         class="form-control"
+        matInput
       />
-    </label>
+    </mat-form-field>
   </div>
 
-  <div
-    class="alert alert-warning"
-    *ngIf="form?.controls?.['from']?.hasError('appCity')"
-  >
-    Invalid city!
-  </div>
+  @if (form?.controls?.['from']?.hasError('appCity')) {
+    <div class="alert alert-warning">Invalid city!</div>
+  }
 
   <div class="form-group">
-    <label
-      >To:
+    <mat-form-field>
+      <mat-label>To:</mat-label>
       <input
         #toField
         [ngModel]="to()"
         (ngModelChange)="updateCriteria(fromField.value, $event)"
         name="to"
         class="form-control"
-    /></label>
+        matInput
+      />
+    </mat-form-field>
   </div>
 
   <div class="form-group">
     <button
-      (click)="search()"
       [disabled]="!from() || !to()"
       class="btn btn-default"
+      type="submit"
+      mat-raised-button
     >
       Search
     </button>
 
-    <button [disabled]="!canUndo()" (click)="undo()" class="btn btn-default">
+    <button
+      [disabled]="!canUndo()"
+      (click)="undo()"
+      class="btn btn-default"
+      mat-raised-button
+    >
       Undo
     </button>
-    <button [disabled]="!canRedo()" (click)="redo()" class="btn btn-default">
+    <button
+      [disabled]="!canRedo()"
+      (click)="redo()"
+      class="btn btn-default"
+      mat-raised-button
+    >
       Redo
     </button>
   </div>
 </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-simple', f.id]"
-        >Edit</a
+  @for (f of flights(); track f.id) {
+    <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-simple', f.id]"
+          >Edit</a
+        >
+      </demo-flight-card>
+    </div>
+  }
 </div>
 
 <pre>{{ selected() | json }}</pre>
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts b/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts
index 1670419d..89dfd4c6 100644
--- a/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts
+++ b/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts
@@ -1,7 +1,8 @@
-import { JsonPipe, NgForOf, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
 import { RouterLink } from '@angular/router';
@@ -10,8 +11,6 @@ import { SimpleFlightBookingStore } from './flight-booking-simple.store';
 
 @Component({
   imports: [
-    NgIf,
-    NgForOf,
     JsonPipe,
     FormsModule,
     FlightCardComponent,
@@ -19,6 +18,7 @@ import { SimpleFlightBookingStore } from './flight-booking-simple.store';
     MatInputModule,
     MatButtonModule,
     RouterLink,
+    MatFormFieldModule,
   ],
   selector: 'demo-flight-search',
   templateUrl: './flight-search-simple.component.html',
diff --git a/apps/demo/src/app/flight-search-redux-connector/flight-search.component.html b/apps/demo/src/app/flight-search-redux-connector/flight-search.component.html
index 2ec452e6..c6de50e9 100644
--- a/apps/demo/src/app/flight-search-redux-connector/flight-search.component.html
+++ b/apps/demo/src/app/flight-search-redux-connector/flight-search.component.html
@@ -2,27 +2,29 @@ <h2 class="title">Flight Search (Redux Connector)</h2>
 
 <form #form="ngForm">
   <div class="form-group">
-    <label
-      >From:
+    <mat-form-field>
+      <mat-label>From</mat-label>
       <input
         name="from"
         [ngModel]="localState.filter.from()"
         (ngModelChange)="patchFilter({ from: $event })"
         class="form-control"
+        matInput
       />
-    </label>
+    </mat-form-field>
   </div>
 
   <div class="form-group">
-    <label
-      >To:
+    <mat-form-field>
+      <mat-label>To</mat-label>
       <input
         name="to"
         [ngModel]="localState.filter.to()"
         (ngModelChange)="patchFilter({ to: $event })"
         class="form-control"
+        matInput
       />
-    </label>
+    </mat-form-field>
   </div>
 
   <div class="form-group">
@@ -30,12 +32,21 @@ <h2 class="title">Flight Search (Redux Connector)</h2>
       (click)="search()"
       [disabled]="!localState.filter.from() || !localState.filter.to()"
       class="btn btn-default"
+      type="button"
+      mat-raised-button
     >
       Search
     </button>
 
     @if (flights().length) {
-      <button (click)="reset()" class="btn btn-default">Reset</button>
+      <button
+        (click)="reset()"
+        class="btn btn-default"
+        type="reset"
+        mat-raised-button
+      >
+        Reset
+      </button>
     }
   </div>
 </form>
@@ -47,8 +58,7 @@ <h2 class="title">Flight Search (Redux Connector)</h2>
         [item]="flight"
         [selected]="localState.basket()[flight.id]"
         (selectedChange)="select(flight.id, $event)"
-      >
-      </demo-flight-card>
+      />
     </div>
   }
 </div>
diff --git a/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts b/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts
index 32aed7dc..70840e59 100644
--- a/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts
+++ b/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts
@@ -1,6 +1,9 @@
 import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { patchState, signalState } from '@ngrx/signals';
 import { Flight } from '../shared/flight';
 import { FlightCardComponent } from '../shared/flight-card.component';
@@ -9,7 +12,14 @@ import { ticketActions } from './+state/actions';
 import { injectFlightStore } from './+state/redux';
 
 @Component({
-  imports: [JsonPipe, FormsModule, FlightCardComponent],
+  imports: [
+    JsonPipe,
+    FormsModule,
+    FlightCardComponent,
+    MatInputModule,
+    MatButtonModule,
+    MatFormFieldModule,
+  ],
   selector: 'demo-flight-search-redux-connector',
   templateUrl: './flight-search.component.html',
 })
diff --git a/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.html b/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.html
index 67e78d54..d343c3f8 100644
--- a/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.html
+++ b/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.html
@@ -49,11 +49,11 @@ <h2 class="title">Flight Search (Pagination)</h2>
     }}</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>
 <mat-paginator
   [length]="flightStore.flightTotalCount()"
@@ -63,5 +63,4 @@ <h2 class="title">Flight Search (Pagination)</h2>
   [pageSizeOptions]="[5, 10, 25]"
   (page)="handlePageEvent($event)"
   aria-label="Select page"
->
-</mat-paginator>
+/>
diff --git a/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts b/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts
index c96574b4..8f8231f8 100644
--- a/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts
+++ b/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts
@@ -26,7 +26,7 @@ export class FlightSearchWithPaginationComponent {
   searchParams: { from: string; to: string } = { from: 'Wien', to: '' };
   flightStore = inject(FlightBookingStore);
 
-  displayedColumns: string[] = ['from', 'to', 'date'];
+  displayedColumns = ['from', 'to', 'date'] as const;
   dataSource = new MatTableDataSource<Flight>([]);
   selection = new SelectionModel<Flight>(true, []);
 
diff --git a/apps/demo/src/app/flight-search/flight-search.component.html b/apps/demo/src/app/flight-search/flight-search.component.html
index 14156ea2..8f2b57f9 100644
--- a/apps/demo/src/app/flight-search/flight-search.component.html
+++ b/apps/demo/src/app/flight-search/flight-search.component.html
@@ -1,3 +1,4 @@
+<h2>Flight Search (<code>withRedux</code>)</h2>
 <form (ngSubmit)="search()">
   <div>
     <mat-form-field>
@@ -13,7 +14,7 @@
     </mat-form-field>
   </div>
 
-  <button mat-raised-button>Search</button>
+  <button mat-raised-button type="submit">Search</button>
 </form>
 
 <mat-table [dataSource]="dataSource">
@@ -37,9 +38,9 @@
     }}</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>
diff --git a/apps/demo/src/app/flight-search/flight-search.component.ts b/apps/demo/src/app/flight-search/flight-search.component.ts
index 1b134a53..ab07153c 100644
--- a/apps/demo/src/app/flight-search/flight-search.component.ts
+++ b/apps/demo/src/app/flight-search/flight-search.component.ts
@@ -23,7 +23,7 @@ export class FlightSearchComponent {
   searchParams: { from: string; to: string } = { from: 'Paris', to: 'London' };
   flightStore = inject(FlightStore);
 
-  displayedColumns: string[] = ['from', 'to', 'date'];
+  displayedColumns = ['from', 'to', 'date'] as const;
   dataSource = new MatTableDataSource<Flight>([]);
   selection = new SelectionModel<Flight>(true, []);
 
diff --git a/apps/demo/src/app/reset/todo-store.ts b/apps/demo/src/app/reset/todo-store.ts
index f3b4f1e4..a19fe636 100644
--- a/apps/demo/src/app/reset/todo-store.ts
+++ b/apps/demo/src/app/reset/todo-store.ts
@@ -1,30 +1,24 @@
 import { setResetState, withReset } from '@angular-architects/ngrx-toolkit';
+import { inject } from '@angular/core';
 import {
   getState,
   patchState,
   signalStore,
   withHooks,
   withMethods,
+  withProps,
   withState,
 } from '@ngrx/signals';
 import { addEntity, updateEntity, withEntities } from '@ngrx/signals/entities';
-
-export interface Todo {
-  id: number;
-  name: string;
-  finished: boolean;
-  description?: string;
-  deadline?: Date;
-}
-
-export type AddTodo = Omit<Todo, 'id'>;
+import { AddTodo, Todo, TodoService } from '../shared/todo.service';
 
 export const TodoStore = signalStore(
   { providedIn: 'root' },
+  withProps(() => ({ _todoService: inject(TodoService) })),
   withReset(),
   withEntities<Todo>(),
-  withState({
-    selectedIds: [] as number[],
+  withState<{ selectedIds: number[] }>({
+    selectedIds: [],
   }),
   withMethods((store) => {
     let currentId = 0;
@@ -43,39 +37,8 @@ export const TodoStore = signalStore(
   }),
   withHooks({
     onInit: (store) => {
-      store._add({
-        name: 'Go for a Walk',
-        finished: false,
-        description:
-          'Go for a walk in the park to relax and enjoy nature. Walking is a great way to clear your mind and get some exercise. It can help reduce stress and improve your mood. Make sure to wear comfortable shoes and bring a bottle of water. Enjoy the fresh air and take in the scenery around you.',
-      });
-
-      store._add({
-        name: 'Read a Book',
-        finished: false,
-        description:
-          'Spend some time reading a book. It can be a novel, a non-fiction book, or any other genre you enjoy. Reading can help you relax and learn new things.',
-      });
-
-      store._add({
-        name: 'Write a Journal',
-        finished: false,
-        description:
-          'Take some time to write in your journal. Reflect on your day, your thoughts, and your feelings. Journaling can be a great way to process emotions and document your life.',
-      });
-
-      store._add({
-        name: 'Exercise',
-        finished: false,
-        description:
-          'Do some physical exercise. It can be a workout, a run, or any other form of exercise you enjoy. Exercise is important for maintaining physical and mental health.',
-      });
-
-      store._add({
-        name: 'Cook a Meal',
-        finished: false,
-        description:
-          'Prepare a meal for yourself or your family. Cooking can be a fun and rewarding activity. Try out a new recipe or make one of your favorite dishes.',
+      store._todoService.getData().forEach((todo) => {
+        store._add(todo);
       });
 
       setResetState(store, getState(store));
diff --git a/apps/demo/src/app/reset/todo.component.ts b/apps/demo/src/app/reset/todo.component.ts
index bb26f491..fad5eb0b 100644
--- a/apps/demo/src/app/reset/todo.component.ts
+++ b/apps/demo/src/app/reset/todo.component.ts
@@ -4,26 +4,28 @@ import { MatButton } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { Todo, TodoStore } from './todo-store';
+import { Todo } from '../shared/todo.service';
+import { TodoStore } from './todo-store';
 
 @Component({
   template: `
-    <div class="button">
-      <button mat-raised-button (click)="resetState()">Reset State</button>
-    </div>
+    <h2><code>withReset</code> Todo List</h2>
 
-    <div>
+    <button mat-raised-button (click)="resetState()" type="button">
+      Reset State
+    </button>
+
+    <section>
       <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)="toggleFinished(row)"
               [checked]="row.finished"
-            >
-            </mat-checkbox>
+            />
           </mat-cell>
         </ng-container>
 
@@ -33,16 +35,16 @@ import { Todo, TodoStore } from './todo-store';
           <mat-cell *matCellDef="let element">{{ element.name }}</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>
+    </section>
   `,
   styles: `
-    .button {
+    button {
       margin-bottom: 1em;
     }
   `,
@@ -51,7 +53,7 @@ import { Todo, TodoStore } from './todo-store';
 export class TodoComponent {
   todoStore = inject(TodoStore);
 
-  displayedColumns: string[] = ['finished', 'name'];
+  displayedColumns = ['finished', 'name'] as const;
   dataSource = new MatTableDataSource<Todo>([]);
   selection = new SelectionModel<Todo>(true, []);
 
diff --git a/apps/demo/src/app/shared/flight-card.component.html b/apps/demo/src/app/shared/flight-card.component.html
index 0447282b..6aa989c3 100644
--- a/apps/demo/src/app/shared/flight-card.component.html
+++ b/apps/demo/src/app/shared/flight-card.component.html
@@ -1,19 +1,19 @@
-<div class="card" [ngClass]="{ 'active-card': selected }">
+<div class="card" [class]="{ 'active-card': selected() }">
   <div class="card-header">
-    <h2 class="title">{{ item.from }} - {{ item.to }}</h2>
+    <h2 class="title">{{ item().from }} - {{ item().to }}</h2>
   </div>
 
   <div class="card-body">
-    <p>Flight-No.: #{{ item.id }}</p>
-    <p>Date: {{ item.date | date: 'dd.MM.yyyy HH:mm:ss' }}</p>
+    <p>Flight-No.: #{{ item().id }}</p>
+    <p>Date: {{ item().date | date: 'dd.MM.yyyy HH:mm:ss' }}</p>
     <p>
-      <button class="btn btn-default" *ngIf="!selected" (click)="select()">
-        Select
-      </button>
-      <button class="btn btn-default" *ngIf="selected" (click)="deselect()">
-        Remove
-      </button>
-      <ng-content></ng-content>
+      @if (!selected()) {
+        <button class="btn btn-default" (click)="select()">Select</button>
+      }
+      @if (selected()) {
+        <button class="btn btn-default" (click)="deselect()">Remove</button>
+      }
+      <ng-content />
     </p>
   </div>
 </div>
diff --git a/apps/demo/src/app/shared/flight-card.component.ts b/apps/demo/src/app/shared/flight-card.component.ts
index 7f27a734..52768bb9 100644
--- a/apps/demo/src/app/shared/flight-card.component.ts
+++ b/apps/demo/src/app/shared/flight-card.component.ts
@@ -1,32 +1,28 @@
-import { CommonModule } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  Output,
+  input,
+  model,
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { initFlight } from './flight';
 
 @Component({
   selector: 'demo-flight-card',
-  imports: [CommonModule, RouterModule],
+  imports: [RouterModule, DatePipe],
   templateUrl: './flight-card.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FlightCardComponent {
-  @Input() item = initFlight;
-  @Input() selected: boolean | undefined;
-  @Output() selectedChange = new EventEmitter<boolean>();
+  readonly item = input(initFlight);
+  selected = model.required<boolean>();
 
   select() {
-    this.selected = true;
-    this.selectedChange.next(true);
+    this.selected.set(true);
   }
 
   deselect() {
-    this.selected = false;
-    this.selectedChange.next(false);
+    this.selected.set(false);
   }
 }
diff --git a/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.html b/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.html
index 5c2d15cf..b13a4f5a 100644
--- a/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.html
+++ b/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.html
@@ -3,14 +3,13 @@ <h2>StorageType:IndexedDB</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
         (change)="checkboxLabel(row)"
         (click)="$event.stopPropagation()"
         [checked]="row.finished"
-      >
-      </mat-checkbox>
+      />
       <mat-icon (click)="removeTodo(row)">delete</mat-icon>
     </mat-cell>
   </ng-container>
@@ -37,9 +36,9 @@ <h2>StorageType:IndexedDB</h2>
     </mat-cell>
   </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-header-row *matHeaderRowDef="displayedColumns" />
   <mat-row
     (click)="selection.toggle(row)"
     *matRowDef="let row; columns: displayedColumns"
-  ></mat-row>
+  />
 </mat-table>
diff --git a/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.scss b/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts b/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts
index dee90768..0db6cfbf 100644
--- a/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts
+++ b/apps/demo/src/app/todo-indexeddb-sync/todo-indexeddb-sync.component.ts
@@ -11,13 +11,12 @@ import { SyncedTodoStore } from './synced-todo-store';
   selector: 'demo-todo-indexeddb-sync',
   imports: [MatCheckboxModule, MatIconModule, MatTableModule, MatButton],
   templateUrl: './todo-indexeddb-sync.component.html',
-  styleUrl: './todo-indexeddb-sync.component.scss',
   standalone: true,
 })
 export class TodoIndexeddbSyncComponent {
   todoStore = inject(SyncedTodoStore);
 
-  displayedColumns: string[] = ['finished', 'name', 'description', 'deadline'];
+  displayedColumns = ['finished', 'name', 'description', 'deadline'] as const;
   dataSource = new MatTableDataSource<Todo>([]);
   selection = new SelectionModel<Todo>(true, []);
 
diff --git a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.html b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.html
index 7cc3bcff..fc83a0c0 100644
--- a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.html
+++ b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.html
@@ -3,14 +3,13 @@ <h2>StorageType:LocalStorage</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
         (change)="checkboxLabel(row)"
         (click)="$event.stopPropagation()"
         [checked]="row.finished"
-      >
-      </mat-checkbox>
+      />
       <mat-icon (click)="removeTodo(row)">delete</mat-icon>
     </mat-cell>
   </ng-container>
@@ -37,9 +36,9 @@ <h2>StorageType:LocalStorage</h2>
     </mat-cell>
   </ng-container>
 
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-header-row *matHeaderRowDef="displayedColumns" />
   <mat-row
     (click)="selection.toggle(row)"
     *matRowDef="let row; columns: displayedColumns"
-  ></mat-row>
+  />
 </mat-table>
diff --git a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.scss b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts
index 96286165..f7332325 100644
--- a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts
+++ b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts
@@ -11,12 +11,11 @@ import { SyncedTodoStore } from './synced-todo-store';
   selector: 'demo-todo-storage-sync',
   imports: [MatCheckboxModule, MatIconModule, MatTableModule, MatButton],
   templateUrl: './todo-storage-sync.component.html',
-  styleUrl: './todo-storage-sync.component.scss',
 })
 export class TodoStorageSyncComponent {
   todoStore = inject(SyncedTodoStore);
 
-  displayedColumns: string[] = ['finished', 'name', 'description', 'deadline'];
+  displayedColumns = ['finished', 'name', 'description', 'deadline'] as const;
   dataSource = new MatTableDataSource<Todo>([]);
   selection = new SelectionModel<Todo>(true, []);
 
diff --git a/apps/demo/src/app/with-conditional/conditional.component.ts b/apps/demo/src/app/with-conditional/conditional.component.ts
index ebc80992..2bd7be19 100644
--- a/apps/demo/src/app/with-conditional/conditional.component.ts
+++ b/apps/demo/src/app/with-conditional/conditional.component.ts
@@ -62,7 +62,7 @@ class ConditionalUserComponent {
 @Component({
   template: `
     <h2>
-      <pre>withConditional</pre>
+      <code>withConditional</code>
     </h2>
 
     <mat-button-toggle-group
@@ -74,7 +74,7 @@ class ConditionalUserComponent {
     </mat-button-toggle-group>
 
     <div>
-      <button mat-raised-button (click)="toggleUserComponent()">
+      <button mat-raised-button (click)="toggleUserComponent()" type="button">
         Toggle User Component
       </button>
     </div>
@@ -91,12 +91,13 @@ class ConditionalUserComponent {
   ],
 })
 export class ConditionalSettingComponent {
+  userService = inject(UserServiceStore);
+
   showUserComponent = signal(false);
 
   toggleUserComponent() {
     this.showUserComponent.update((show) => !show);
   }
-  userService = inject(UserServiceStore);
   protected readonly userFeature = signal<'real' | 'fake'>('real');
 
   effRef = effect(() => {