feat(drawer): expose CdkScrollable instance (#9183)

Exposes the `CdkScrollable` instance that wraps around the drawer's content. This makes it easier for consumers to react to scrolling inside the container.

Fixes #9136.

Author: crisbeto

src/lib/sidenav/drawer.ts

@@ -31,6 +31,7 @@ import {
   QueryList,
   ViewEncapsulation,
   InjectionToken,
+  ViewChild,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {merge} from 'rxjs/observable/merge';
@@ -43,6 +44,7 @@ import {map} from 'rxjs/operators/map';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import {matDrawerAnimations} from './drawer-animations';
+import {CdkScrollable} from '@angular/cdk/scrolling';
 
 
 /** Throws an exception when two MatDrawer are matching the same position. */
@@ -468,6 +470,9 @@ export class MatDrawerContainer implements AfterContentInit, OnDestroy {
 
   _contentMargins = new Subject<{left: number|null, right: number|null}>();
 
+  /** Reference to the CdkScrollable instance that wraps the scrollable content. */
+  @ViewChild(CdkScrollable) scrollable: CdkScrollable;
+
   constructor(@Optional() private _dir: Directionality,
               private _element: ElementRef,
               private _ngZone: NgZone,

src/lib/sidenav/sidenav.md

@@ -172,6 +172,21 @@ CSS to adjust to either type of device.
 
 <!-- example(sidenav-responsive) -->
 
+### Reacting to scroll events inside the sidenav container
+
+To react to scrolling inside the `<mat-sidenav-container>`, you can get a hold of the underlying
+`CdkScrollable` instance through the `MatSidenavContainer`.
+
+```ts
+class YourComponent {
+  @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer;
+
+  constructor() {
+    this.sidenavContainer.scrollable.elementScrolled().subscribe(() => /* react to scrolling */);
+  }
+}
+```
+
 ### Accessibility
 
 The `<mat-sidenav>` an `<mat-sidenav-content>` should each be given an appropriate `role` attribute

src/lib/sidenav/sidenav.ts

@@ -7,10 +7,16 @@
  */
 
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef,
-  Component, ContentChild,
-  ContentChildren, forwardRef, Inject, Input,
-  ViewEncapsulation
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ContentChildren,
+  forwardRef,
+  Inject,
+  Input,
+  ViewEncapsulation,
+  QueryList,
 } from '@angular/core';
 import {MatDrawer, MatDrawerContainer, MatDrawerContent} from './drawer';
 import {matDrawerAnimations} from './drawer-animations';
@@ -107,7 +113,6 @@ export class MatSidenav extends MatDrawer {
   preserveWhitespaces: false,
 })
 export class MatSidenavContainer extends MatDrawerContainer {
-  @ContentChildren(MatSidenav) _drawers;
-
-  @ContentChild(MatSidenavContent) _content;
+  @ContentChildren(MatSidenav) _drawers: QueryList<MatSidenav>;
+  @ContentChild(MatSidenavContent) _content: MatSidenavContent;
 }