Skip to content

docs(sidenav): update responsive example to use current APIs#33318

Open
EduardF1 wants to merge 1 commit into
angular:mainfrom
EduardF1:docs/update-responsive-sidenav-example
Open

docs(sidenav): update responsive example to use current APIs#33318
EduardF1 wants to merge 1 commit into
angular:mainfrom
EduardF1:docs/update-responsive-sidenav-example

Conversation

@EduardF1
Copy link
Copy Markdown

Summary

Updates the responsive sidenav documentation example to use the current CDK APIs instead of deprecated MediaMatcher/MediaQueryList event listener methods.

Root Cause

The example was using MediaMatcher with addEventListener/removeEventListener, which requires manual lifecycle management via OnDestroy. An Angular team member noted the preferred approach is to use the CDK's BreakpointObserver.observe() directly.

Changes

  • Replaced MediaMatcher with BreakpointObserver.observe()
  • Used takeUntilDestroyed() for automatic subscription cleanup
  • Removed OnDestroy implementation and manual event listener management
  • Removed private _mobileQuery and _mobileQueryListener fields

Result

The component is now simpler, idiomatic Angular, and no longer uses the raw MediaQueryList API.

Fixes #29266

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 angular#29266

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 29, 2026

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@angular-robot angular-robot Bot added the area: docs Related to the documentation label May 29, 2026
@pullapprove pullapprove Bot requested review from crisbeto and wagnermaciel May 29, 2026 23:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

docs-bug(Sidenav): deprecated methods used in the responsive sidenav example

1 participant