MatSidenavContainer scroll events not working as documented

[mackelito]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Able to react to scrolling inside the <mat-sidenav-container>

What is the current behavior?

Unhandled Promise rejection: Cannot read property 'scrollable' of undefined ; Zone: ; Task: Promise.then ; Value: Error: Cannot read property 'scrollable' of undefined TypeError: Cannot read property 'scrollable' of undefined at new SidenavResponsiveExample

What are the steps to reproduce?

https://stackblitz.com/edit/angular-rgkuk8?file=app/sidenav-responsive-example.ts

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[stevo-knievo]

it's still broken in 6.1.0.

Here the example:
https://stackblitz.com/edit/sidenavcontainer-scrollable-elementscrolled

[mmalerba]

It looks like the query listener is being added too soon in the example, it should be deferred until ngOnInit: https://stackblitz.com/edit/angular-rgkuk8-ssckuv?file=app/sidenav-responsive-example.ts

Would anyone like to send a PR updating the example?

[stevo-knievo]

Sorry I don't understand. My example has no query listener. The problem is that "Reacting to scroll events inside the sidenav container" as described here doesn't work respectively it throws an error: Error: this.sidenavContainer is undefined

[mmalerba]

@stevo-knievo ok sorry I think I misunderstood. So there's a couple things. First, in your demo the sidenav content is not actually the element that's scrolling. The sidenav container is expanding to fill its content and the body is scrolling. You would need to size it so the content element is the element that's scrolling.

The second issue appears to be a problem with Angular Material. It looks like we only grab the CdkScrollable when the <mat-sidenav-content> is not explicitly passed. A workaround for this is to just add the cdkScrollable directive to the <mat-sidenav-content> that you pass in and then grab that with a @ViewChild(). We should fix this though, so leaving this issue open to track it.

Here's a version of your example where I've absolutely positioned the sidenav container to restrict its height and added the cdkScrollable to the content element: https://stackblitz.com/edit/sidenavcontainer-scrollable-elementscrolled-jqg8ob?file=src/app/app.component.html