docs(material/sidenav): Deprecated methods used in the responsive sidenav example

src/components-examples/material/sidenav/BUILD.bazel

@@ -28,6 +28,7 @@ ng_module(
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",
+        "@npm//rxjs",
     ],
 )
 

src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html

@@ -1,25 +1,21 @@
 @if (shouldRun) {
-  <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
+  <div class="example-container" [class.example-is-mobile]="mobileQuery">
     <mat-toolbar color="primary" class="example-toolbar">
-      <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
+      <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">
+    <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery ? 56 : 0">
+      <mat-sidenav #snav [mode]="mobileQuery ? 'over' : 'side'" [fixedInViewport]="mobileQuery" fixedTopGap="56">
         <mat-nav-list>
-          @for (nav of fillerNav; track nav) {
-            <a mat-list-item routerLink=".">{{nav}}</a>
-          }
+          <a mat-list-item *ngFor="let nav of fillerNav">{{ nav }}</a>
         </mat-nav-list>
       </mat-sidenav>
 
       <mat-sidenav-content>
-        @for (content of fillerContent; track content) {
-    <p>{{content}}</p>
-  }
+        <p *ngFor="let content of fillerContent">{{ content }}</p>
       </mat-sidenav-content>
     </mat-sidenav-container>
   </div>

src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts

@@ -1,24 +1,30 @@
-import {MediaMatcher} from '@angular/cdk/layout';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 import {ChangeDetectorRef, Component, OnDestroy} 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 {Subscription} from 'rxjs';
+import {NgFor} from '@angular/common';
 
 /** @title Responsive sidenav */
 @Component({
   selector: 'sidenav-responsive-example',
   templateUrl: 'sidenav-responsive-example.html',
   styleUrl: 'sidenav-responsive-example.css',
   standalone: true,
-  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule,
+    NgFor,
+  ],
 })
 export class SidenavResponsiveExample implements OnDestroy {
-  mobileQuery: MediaQueryList;
-
   fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
-
   fillerContent = Array.from(
     {length: 50},
     () =>
@@ -29,16 +35,23 @@ export class SidenavResponsiveExample implements OnDestroy {
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
   );
 
-  private _mobileQueryListener: () => void;
+  mobileQuery: boolean;
+  private _breakpointSubscription: Subscription;
 
-  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
-    this.mobileQuery = media.matchMedia('(max-width: 600px)');
-    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
-    this.mobileQuery.addListener(this._mobileQueryListener);
+  constructor(
+    private _breakpointObserver: BreakpointObserver,
+    private _changeDetectorRef: ChangeDetectorRef,
+  ) {
+    this._breakpointSubscription = this._breakpointObserver
+      .observe([Breakpoints.Handset])
+      .subscribe(result => {
+        this.mobileQuery = result.matches;
+        this._changeDetectorRef.detectChanges();
+      });
   }
 
   ngOnDestroy(): void {
-    this.mobileQuery.removeListener(this._mobileQueryListener);
+    this._breakpointSubscription.unsubscribe();
   }
 
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);