From b4884316e973fd74cd5687b95b32e18c567fe365 Mon Sep 17 00:00:00 2001
From: robertIsaac <dev.robert.isaac@gmail.com>
Date: Mon, 23 Dec 2024 00:37:13 +0200
Subject: [PATCH] docs(material/sidenav): improve responsive example

improvements:
- use signal instead of manually detect changes
- add access modifier to the class properties
- add missing import of routerLink
- replace deprecated add/removeListener with add/removeEventListener
---
 .../sidenav-responsive-example.html           |  8 ++--
 .../sidenav-responsive-example.ts             | 37 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
index 4fbab4fc2719..cf7c57f17924 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
@@ -1,14 +1,14 @@
 @if (shouldRun) {
-  <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
+  <div class="example-container" [class.example-is-mobile]="isMobile()">
     <mat-toolbar class="example-toolbar">
       <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
       <h1 class="example-app-name">Responsive App</h1>
     </mat-toolbar>
 
     <mat-sidenav-container class="example-sidenav-container"
-                          [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
-      <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
-                  [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
+                          [style.marginTop.px]="isMobile() ? 56 : 0">
+      <mat-sidenav #snav [mode]="isMobile() ? 'over' : 'side'"
+                  [fixedInViewport]="isMobile()" fixedTopGap="56">
         <mat-nav-list>
           @for (nav of fillerNav; track nav) {
             <a mat-list-item routerLink=".">{{nav}}</a>
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
index ae1c85a7a1bf..a10511604986 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
@@ -1,24 +1,30 @@
 import {MediaMatcher} from '@angular/cdk/layout';
-import {ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core';
+import {Component, OnDestroy, inject, signal} from '@angular/core';
 import {MatListModule} from '@angular/material/list';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatToolbarModule} from '@angular/material/toolbar';
+import {RouterLink} from '@angular/router';
 
 /** @title Responsive sidenav */
 @Component({
   selector: 'sidenav-responsive-example',
   templateUrl: 'sidenav-responsive-example.html',
   styleUrl: 'sidenav-responsive-example.css',
-  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    RouterLink,
+  ],
 })
 export class SidenavResponsiveExample implements OnDestroy {
-  mobileQuery: MediaQueryList;
+  protected readonly fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
 
-  fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
-
-  fillerContent = Array.from(
+  protected readonly fillerContent = Array.from(
     {length: 50},
     () =>
       `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
@@ -28,20 +34,25 @@ export class SidenavResponsiveExample implements OnDestroy {
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
   );
 
-  private _mobileQueryListener: () => void;
+  protected readonly isMobile = signal(true);
+
+  private readonly _mobileQuery: MediaQueryList;
+  private readonly _mobileQueryListener: () => void;
 
   constructor() {
-    const changeDetectorRef = inject(ChangeDetectorRef);
     const media = inject(MediaMatcher);
 
-    this.mobileQuery = media.matchMedia('(max-width: 600px)');
-    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
-    this.mobileQuery.addListener(this._mobileQueryListener);
+    this._mobileQuery = media.matchMedia('(max-width: 600px)');
+    this.isMobile.set(this._mobileQuery.matches);
+    this._mobileQueryListener = () => this.isMobile.set(this._mobileQuery.matches);
+    this._mobileQuery.addEventListener('change', this._mobileQueryListener);
   }
 
   ngOnDestroy(): void {
-    this.mobileQuery.removeListener(this._mobileQueryListener);
+    this._mobileQuery.removeEventListener('change', this._mobileQueryListener);
   }
 
-  shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
+  protected readonly shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(
+    window.location.host,
+  );
 }