From fe2fc3d0329fc6413e8ef2527ddde3d61aec15a5 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 28 Jul 2026 09:59:22 +0200
Subject: [PATCH] fix(material/schematics): resolve issues in navigation
 schematic

Resolves the following issues in the navigation schematic:
1. We were using observables instead of signals for `isHandset`.
2. We were using `color` on the toolbar.
3. One of the `standalone` checks in the generated test was flipped.

Fixes #33381.
---
 .../__name@dasherize__.component.html.template     | 12 +++++++-----
 .../__name@dasherize__.component.spec.ts.template  |  2 +-
 .../__name@dasherize__.component.ts.template       | 14 +++++---------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
index a8841650ade9..a16f1f2bd276 100644
--- a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
+++ b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template
@@ -1,8 +1,10 @@
+@let isHandset = this.isHandset();
+
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" fixedInViewport
-      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-      [mode]="(isHandset$ | async) ? 'over' : 'side'"
-      [opened]="(isHandset$ | async) === false">
+      [attr.role]="isHandset ? 'dialog' : 'navigation'"
+      [mode]="isHandset ? 'over' : 'side'"
+      [opened]="isHandset === false">
     <mat-toolbar>Menu</mat-toolbar>
     <mat-nav-list>
       <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %>>Link 1</a>
@@ -11,8 +13,8 @@
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <mat-toolbar color="primary">
-      @if (isHandset$ | async) {
+    <mat-toolbar>
+      @if (isHandset) {
         <button
           type="button"
           aria-label="Toggle sidenav"
diff --git a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template
index dea7c0e34f65..8f628af7ea1d 100644
--- a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template
+++ b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template
@@ -9,7 +9,7 @@ import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.compone
 
 describe('<%= classify(name) %>Component', () => {
   let component: <%= classify(name) %>Component;
-  let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(standalone) { %>
+  let fixture: ComponentFixture<<%= classify(name) %>Component>;<% if(!standalone) { %>
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
diff --git a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
index 55b0852452be..0994133e74ac 100644
--- a/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
+++ b/src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template
@@ -1,13 +1,13 @@
 import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %>
-import { AsyncPipe } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';<% } %>
 import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -27,16 +27,12 @@ import { map, shareReplay } from 'rxjs/operators';
     MatSidenavModule,
     MatListModule,
     MatIconModule,
-    AsyncPipe,
   ]<% } else { %>,
   standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
-  private breakpointObserver = inject(BreakpointObserver);
+  private readonly breakpointObserver = inject(BreakpointObserver);
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
+  readonly isHandset = toSignal(this.breakpointObserver.observe(Breakpoints.Handset)
+    .pipe(map(result => result.matches)), { initialValue: false });
 }