bug(material/sidenav): Unable to toggle sidenav from outside component

[Marcel0024]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Below 14 i think (got solution from old examples)

Description

So toolbar in the header should open the sidenav further down. I have a header service, that has an event emitter. In the header component the button calls headerService.toggle.emit()

The way further down sibling subscribes to that event and should toggle the sidenav. I can see the event coming in but doesnt do anything.

@ViewChild('sidenav') sidenav!: MatSidenav;
this.headerService.toggle.subscribe(() => {
     this.sidenav.toggle();
});

I forked the 'Responsive sidenav' example from the sidenav component and made a repro

Reproduction

StackBlitz link: https://stackblitz.com/edit/t77lra?file=src%2Fexample%2Fsidenav-responsive-example.ts Steps to reproduce:

1. Create service outside the component that has mat-sidnav
2. Subscribing to that event and call sidenav.toggle() inside the subscription, should toggle the sidenav

Expected Behavior

Opening/toggle the sidenav from outside component

Actual Behavior

@ViewChild('sidenav') sidenav!: MatSidenav;
this.headerService.toggle.subscribe(() => {
     this.sidenav.toggle();
});

Does nothing

Environment

• Angular: 16.1.2
• CDK/Material: 16.1.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[andrewseguin]

This is because change detection is not running to check the sidenav state and run its animation. You can remove OnPush so that the click triggers zone's change detection, or manually run a change detection cycle

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}