From 7318159ea4e48d2dd270affac633681a7fe72bfd Mon Sep 17 00:00:00 2001
From: Pavaneswar6699 <nelagonda.pavaneswar@students.iiit.ac.in>
Date: Fri, 12 Jun 2026 13:37:42 +0530
Subject: [PATCH] fix(material/schematics): update navigation schematic with
 modern Angular patterns

- Replace Material 2 color='primary' with Material 3 theming
- Replace Observables with Signals for modern Angular (17+)
- Fix mobile sidenav collapse by closing drawer on navigation

Fixes #33381
---
 ...__name@dasherize__.component.html.template | 22 ++++++++++---------
 .../__name@dasherize__.component.ts.template  | 19 ++++++++--------
 2 files changed, 21 insertions(+), 20 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..a264a09a7270 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,18 +1,20 @@
 <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">
-    <mat-toolbar>Menu</mat-toolbar>
+      [attr.role]="(isHandset()) ? 'dialog' : 'navigation'"
+      [mode]="(isHandset()) ? 'over' : 'side'"
+      [opened]="!(isHandset())">
+    <mat-toolbar>
+      <span>Menu</span>
+    </mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %>>Link 1</a>
-      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %>>Link 2</a>
-      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %>>Link 3</a>
+      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %> (click)="drawer.close()">Link 1</a>
+      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %> (click)="drawer.close()">Link 2</a>
+      <a mat-list-item <%= routing ? 'routerLink="/"' : 'href="#"' %> (click)="drawer.close()">Link 3</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
-    <mat-toolbar color="primary">
-      @if (isHandset$ | async) {
+    <mat-toolbar class="mat-elevation-z4">
+      @if (isHandset()) {
         <button
           type="button"
           aria-label="Toggle sidenav"
@@ -21,7 +23,7 @@
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>
       }
-      <span><%= project %></span>
+      <span class="toolbar-title"><%= project %></span>
     </mat-toolbar>
     <!-- Add Content Here -->
   </mat-sidenav-content>
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..64ad2f9dc628 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,11 @@
-import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { Component, inject, signal, computed<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %>
-import { AsyncPipe } from '@angular/common';
+import { NgIf } 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';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -27,16 +25,17 @@ import { map, shareReplay } from 'rxjs/operators';
     MatSidenavModule,
     MatListModule,
     MatIconModule,
-    AsyncPipe,
+    NgIf,
   ]<% } else { %>,
   standalone: false<% } %>
 })
 export class <%= classify(name) %>Component {
   private breakpointObserver = inject(BreakpointObserver);
+  protected isHandset = signal(false);
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
-    .pipe(
-      map(result => result.matches),
-      shareReplay()
-    );
+  constructor() {
+    this.breakpointObserver.observe(Breakpoints.Handset).subscribe(result => {
+      this.isHandset.set(result.matches);
+    });
+  }
 }