Skip to content

Commit ff0fc7d

Browse files
Eduard FischerCopilot
andcommitted
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>
1 parent cd62949 commit ff0fc7d

1 file changed

Lines changed: 9 additions & 15 deletions

File tree

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

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {MediaMatcher} from '@angular/cdk/layout';
2-
import {Component, OnDestroy, inject, signal} from '@angular/core';
1+
import {BreakpointObserver} from '@angular/cdk/layout';
2+
import {Component, inject, signal} from '@angular/core';
3+
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
34
import {MatListModule} from '@angular/material/list';
45
import {MatSidenavModule} from '@angular/material/sidenav';
56
import {MatIconModule} from '@angular/material/icon';
@@ -13,7 +14,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
1314
styleUrl: 'sidenav-responsive-example.css',
1415
imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
1516
})
16-
export class SidenavResponsiveExample implements OnDestroy {
17+
export class SidenavResponsiveExample {
1718
protected readonly fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
1819

1920
protected readonly fillerContent = Array.from(
@@ -28,20 +29,13 @@ export class SidenavResponsiveExample implements OnDestroy {
2829

2930
protected readonly isMobile = signal(true);
3031

31-
private readonly _mobileQuery: MediaQueryList;
32-
private readonly _mobileQueryListener: () => void;
33-
3432
constructor() {
35-
const media = inject(MediaMatcher);
36-
37-
this._mobileQuery = media.matchMedia('(max-width: 600px)');
38-
this.isMobile.set(this._mobileQuery.matches);
39-
this._mobileQueryListener = () => this.isMobile.set(this._mobileQuery.matches);
40-
this._mobileQuery.addEventListener('change', this._mobileQueryListener);
41-
}
33+
const breakpointObserver = inject(BreakpointObserver);
4234

43-
ngOnDestroy(): void {
44-
this._mobileQuery.removeEventListener('change', this._mobileQueryListener);
35+
breakpointObserver
36+
.observe('(max-width: 600px)')
37+
.pipe(takeUntilDestroyed())
38+
.subscribe(result => this.isMobile.set(result.matches));
4539
}
4640

4741
protected readonly shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(

0 commit comments

Comments
 (0)