From 9dcdca66f8d1e42e41a6f0fd361b33d048bf5194 Mon Sep 17 00:00:00 2001 From: takahiro-okada Date: Fri, 22 May 2026 07:30:18 +1200 Subject: [PATCH 1/2] docs(material/sidenav): use BreakpointObserver in responsive example --- .../material/sidenav/BUILD.bazel | 1 + .../sidenav-responsive-example.ts | 31 +++++++------------ 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/components-examples/material/sidenav/BUILD.bazel b/src/components-examples/material/sidenav/BUILD.bazel index 862ce2178d2e..6b2b333542a1 100644 --- a/src/components-examples/material/sidenav/BUILD.bazel +++ b/src/components-examples/material/sidenav/BUILD.bazel @@ -18,6 +18,7 @@ ng_project( "//:node_modules/@angular/platform-browser", "//:node_modules/@angular/router", "//:node_modules/@types/jasmine", + "//:node_modules/rxjs", "//src/cdk/layout", "//src/cdk/testing", "//src/cdk/testing/testbed", 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..cb481362ced9 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,10 +1,12 @@ -import {MediaMatcher} from '@angular/cdk/layout'; -import {Component, OnDestroy, inject, signal} from '@angular/core'; +import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout'; +import {Component, inject} from '@angular/core'; +import {toSignal} from '@angular/core/rxjs-interop'; 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 {map} from 'rxjs/operators'; /** @title Responsive sidenav */ @Component({ @@ -13,7 +15,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( @@ -26,23 +28,12 @@ export class SidenavResponsiveExample implements OnDestroy { cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`, ); - 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); - } - - ngOnDestroy(): void { - this._mobileQuery.removeEventListener('change', this._mobileQueryListener); - } + protected readonly isMobile = toSignal( + inject(BreakpointObserver) + .observe(Breakpoints.XSmall) + .pipe(map(result => result.matches)), + {initialValue: true}, + ); protected readonly shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test( window.location.host, From d28b4a8e22afba9570db19f7679061fb78070606 Mon Sep 17 00:00:00 2001 From: takahiro-okada Date: Fri, 22 May 2026 07:36:02 +1200 Subject: [PATCH 2/2] docs(material/sidenav): retrigger CLA check