diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index ecc415535333..78d52c482d0e 100644 --- a/src/lib/sidenav/drawer.ts +++ b/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. */ @@ -470,6 +472,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, diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index 5c736ea018f9..b367fac0bd85 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -172,6 +172,21 @@ CSS to adjust to either type of device. +### Reacting to scroll events inside the sidenav container + +To react to scrolling inside the ``, 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 `` an `` should each be given an appropriate `role` attribute diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 1fb22d0e7121..11c75792c0da 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/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; + @ContentChild(MatSidenavContent) _content: MatSidenavContent; }