From fc2eb8f9d6ce3651f6746d17a0b5eb5ae64eead2 Mon Sep 17 00:00:00 2001 From: EduardF1 Date: Sat, 30 May 2026 01:13:20 +0200 Subject: [PATCH] docs(sidenav): update responsive example to use current APIs Replaces the manual MediaMatcher/MediaQueryList setup with the CDK's BreakpointObserver.observe(), which is the idiomatic Angular approach. Uses takeUntilDestroyed() for automatic subscription cleanup, removing the need to implement OnDestroy and manually manage event listeners. Fixes #29266 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../sidenav-responsive-example.ts | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) 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 f47ad84be085..2055501393c5 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,5 +1,6 @@ -import {MediaMatcher} from '@angular/cdk/layout'; -import {Component, OnDestroy, inject, signal} from '@angular/core'; +import {BreakpointObserver} from '@angular/cdk/layout'; +import {Component, inject, signal} from '@angular/core'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {MatListModule} from '@angular/material/list'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatIconModule} from '@angular/material/icon'; @@ -13,7 +14,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; styleUrl: 'sidenav-responsive-example.css', imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule], }) -export class SidenavResponsiveExample implements OnDestroy { +export class SidenavResponsiveExample { protected readonly fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`); protected readonly fillerContent = Array.from( @@ -28,20 +29,13 @@ export class SidenavResponsiveExample implements OnDestroy { protected readonly isMobile = signal(true); - private readonly _mobileQuery: MediaQueryList; - private readonly _mobileQueryListener: () => void; - constructor() { - const media = inject(MediaMatcher); - - 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); - } + const breakpointObserver = inject(BreakpointObserver); - ngOnDestroy(): void { - this._mobileQuery.removeEventListener('change', this._mobileQueryListener); + breakpointObserver + .observe('(max-width: 600px)') + .pipe(takeUntilDestroyed()) + .subscribe(result => this.isMobile.set(result.matches)); } protected readonly shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(