add md-drawer-content

Author: mmalerba

src/lib/sidenav/drawer-container.html

@@ -1,8 +1,10 @@
 <div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
      [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
 
-<ng-content select="md-drawer, mat-drawer, md-sidenav, mat-sidenav"></ng-content>
+<ng-content select="md-drawer, mat-drawer"></ng-content>
 
-<div class="mat-drawer-content" [ngStyle]="_styles" cdk-scrollable>
+<ng-content select="md-drawer-content, mat-drawer-content">
+</ng-content>
+<md-drawer-content *ngIf="!_content">
   <ng-content></ng-content>
-</div>
+</md-drawer-content>

src/lib/sidenav/drawer.html

@@ -22,7 +22,7 @@ import {
   NgZone,
   OnDestroy,
   Inject,
-  ChangeDetectorRef,
+  ChangeDetectorRef, ContentChild,
 } from '@angular/core';
 import {animate, state, style, transition, trigger, AnimationEvent} from '@angular/animations';
 import {Directionality, coerceBooleanProperty} from '../core';
@@ -31,6 +31,7 @@ import {ESCAPE} from '../core/keyboard/keycodes';
 import {first, takeUntil, startWith} from '../core/rxjs/index';
 import {DOCUMENT} from '@angular/platform-browser';
 import {merge} from 'rxjs/observable/merge';
+import {Subject} from 'rxjs/Subject';
 
 
 /** Throws an exception when two MdDrawer are matching the same position. */
@@ -47,6 +48,20 @@ export class MdDrawerToggleResult {
   constructor(public type: 'open' | 'close', public animationFinished: boolean) {}
 }
 
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-drawer-content, mat-drawer-content',
+  template: '<ng-content></ng-content>',
+  host: {
+    'class': 'mat-drawer-content',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MdDrawerContent {}
+
+
 /**
  * <md-drawer> component.
  *
@@ -57,7 +72,7 @@ export class MdDrawerToggleResult {
 @Component({
   moduleId: module.id,
   selector: 'md-drawer, mat-drawer',
-  templateUrl: 'drawer.html',
+  template: '<ng-content></ng-content>',
   animations: [
     trigger('transform', [
       state('open, open-instant', style({
@@ -116,7 +131,13 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   set align(value) { this.position = value; }
 
   /** Mode of the drawer; one of 'over', 'push' or 'side'. */
-  @Input() mode: 'over' | 'push' | 'side' = 'over';
+  @Input()
+  get mode() { return this._mode; }
+  set mode(value) {
+    this._mode = value;
+    this._modeChanged.next();
+  }
+  private _mode: 'over' | 'push' | 'side' = 'over';
 
   /** Whether the drawer can be closed with the escape key or not. */
   @Input()
@@ -155,6 +176,8 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   /** @deprecated */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
 
+  _modeChanged = new Subject();
+
   get isFocusTrapEnabled() {
     // The focus trap is only enabled when the drawer is open in any mode other than side.
     return this.opened && this.mode !== 'side';
@@ -293,6 +316,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   }
 }
 
+
 /**
  * <md-drawer-container> component.
  *
@@ -316,6 +340,8 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
 export class MdDrawerContainer implements AfterContentInit {
   @ContentChildren(MdDrawer) _drawers: QueryList<MdDrawer>;
 
+  @ContentChild(MdDrawerContent) _content: MdDrawerContent;
+
   /** The drawer child with the `start` position. */
   get start() { return this._start; }
 
@@ -357,6 +383,7 @@ export class MdDrawerContainer implements AfterContentInit {
       this._drawers.forEach((drawer: MdDrawer) => {
         this._watchDrawerToggle(drawer);
         this._watchDrawerPosition(drawer);
+        this._watchDrawerMode(drawer);
       });
     });
   }
@@ -405,6 +432,14 @@ export class MdDrawerContainer implements AfterContentInit {
         first.call(this._ngZone.onMicrotaskEmpty).subscribe(() => this._validateDrawers()));
   }
 
+  /** Subscribes to changes in drawer mode so we can run change detection. */
+  private _watchDrawerMode(drawer: MdDrawer): void {
+    if (drawer) {
+      takeUntil.call(drawer._modeChanged, this._drawers.changes).subscribe(
+          () => this._changeDetectorRef.markForCheck());
+    }
+  }
+
   /** Toggles the 'mat-drawer-opened' class on the main 'md-drawer-container' element. */
   private _setContainerClass(isAdd: boolean): void {
     if (isAdd) {

src/lib/sidenav/drawer.ts

@@ -11,14 +11,29 @@ import {CommonModule} from '@angular/common';
 import {A11yModule} from '@angular/cdk/a11y';
 import {OverlayModule} from '@angular/cdk/overlay';
 import {MdCommonModule} from '../core';
-import {MdDrawer, MdDrawerContainer} from './drawer';
-import {MdSidenav, MdSidenavContainer} from './sidenav';
+import {MdDrawer, MdDrawerContainer, MdDrawerContent} from './drawer';
+import {MdSidenav, MdSidenavContainer, MdSidenavContent} from './sidenav';
 
 
 @NgModule({
   imports: [CommonModule, MdCommonModule, A11yModule, OverlayModule],
-  exports: [MdDrawerContainer, MdDrawer, MdSidenavContainer, MdSidenav, MdCommonModule],
-  declarations: [MdDrawerContainer, MdDrawer, MdSidenavContainer, MdSidenav],
+  exports: [
+    MdCommonModule,
+    MdDrawer,
+    MdDrawerContainer,
+    MdDrawerContent,
+    MdSidenav,
+    MdSidenavContainer,
+    MdSidenavContent,
+  ],
+  declarations: [
+    MdDrawer,
+    MdDrawerContainer,
+    MdDrawerContent,
+    MdSidenav,
+    MdSidenavContainer,
+    MdSidenavContent,
+  ],
 })
 export class MdSidenavModule {}
 

src/lib/sidenav/index.ts

@@ -0,0 +1,10 @@
+<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+     [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+
+<ng-content select="md-sidenav, mat-sidenav"></ng-content>
+
+<ng-content select="md-sidenav-content, mat-sidenav-content">
+</ng-content>
+<md-sidenav-content *ngIf="!_content">
+  <ng-content></ng-content>
+</md-sidenav-content>

src/lib/sidenav/sidenav-container.html

@@ -8,18 +8,31 @@
 
 import {
   ChangeDetectionStrategy,
-  Component,
+  Component, ContentChild,
   ContentChildren,
   ViewEncapsulation
 } from '@angular/core';
 import {MdDrawer, MdDrawerContainer} from './drawer';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
 
+@Component({
+  moduleId: module.id,
+  selector: 'md-sidenav-content, mat-sidenav-content',
+  template: '<ng-content></ng-content>',
+  host: {
+    'class': 'mat-drawer-content mat-sidenav-content',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class MdSidenavContent {}
+
+
 @Component({
   moduleId: module.id,
   selector: 'md-sidenav, mat-sidenav',
-  templateUrl: 'drawer.html',
+  template: '<ng-content></ng-content>',
   animations: [
     trigger('transform', [
       state('open, open-instant', style({
@@ -57,7 +70,7 @@ export class MdSidenav extends MdDrawer {}
 @Component({
   moduleId: module.id,
   selector: 'md-sidenav-container, mat-sidenav-container',
-  templateUrl: 'drawer-container.html',
+  templateUrl: 'sidenav-container.html',
   styleUrls: [
     'drawer.css',
     'drawer-transitions.css',
@@ -70,4 +83,6 @@ export class MdSidenav extends MdDrawer {}
 })
 export class MdSidenavContainer extends MdDrawerContainer {
   @ContentChildren(MdSidenav) _drawers;
+
+  @ContentChild(MdSidenavContent) _content;
 }