fix(drawer): Fix 'mat-drawer-opened' not properly getting added upon mode change

src/lib/sidenav/drawer.spec.ts

@@ -66,6 +66,40 @@ describe('MdDrawer', () => {
       expect(getComputedStyle(drawerBackdropElement.nativeElement).visibility).toBe('hidden');
     }));
 
+    it('should only add mat-drawer-opened class when not in side mode', fakeAsync(() => {
+      let fixture = TestBed.createComponent(BasicTestApp);
+
+      fixture.detectChanges();
+
+      let testComponent: BasicTestApp = fixture.debugElement.componentInstance;
+      let drawerContainerNativeElement
+          = fixture.debugElement.query(By.css('md-drawer-container')).nativeElement;
+
+      testComponent.mode = 'side';
+      fixture.debugElement.query(By.css('.open')).nativeElement.click();
+      fixture.detectChanges();
+
+      tick();
+      fixture.detectChanges();
+
+      expect(drawerContainerNativeElement.classList).not.toContain('mat-drawer-opened');
+
+      fixture.debugElement.query(By.css('.close')).nativeElement.click();
+      fixture.detectChanges();
+
+      tick();
+      fixture.detectChanges();
+
+      testComponent.mode = 'over';
+      fixture.debugElement.query(By.css('.open')).nativeElement.click();
+      fixture.detectChanges();
+
+      tick();
+      fixture.detectChanges();
+
+      expect(drawerContainerNativeElement.classList).toContain('mat-drawer-opened');
+    }));
+
     it('does not throw when created without a drawer', fakeAsync(() => {
       expect(() => {
         let fixture = TestBed.createComponent(BasicTestApp);
@@ -386,7 +420,8 @@ class DrawerContainerTwoDrawerTestApp {
     <md-drawer-container (backdropClick)="backdropClicked()">
       <md-drawer #drawer position="start"
                  (open)="open()"
-                 (close)="close()">
+                 (close)="close()"
+                 [mode]="mode">
         <button #drawerButton>Content.</button>
       </md-drawer>
       <button (click)="drawer.open()" class="open" #openButton></button>
@@ -397,6 +432,7 @@ class BasicTestApp {
   openCount: number = 0;
   closeCount: number = 0;
   backdropClickedCount: number = 0;
+  mode: string = 'over';
 
   @ViewChild('drawerButton') drawerButton: ElementRef;
   @ViewChild('openButton') openButton: ElementRef;

src/lib/sidenav/drawer.ts

@@ -116,7 +116,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: any) {
+    this._mode = value;
+    this.onModeChanged.emit();
+  }
+  private _mode: 'over' | 'push' | 'side' = 'over';
 
   /** Whether the drawer can be closed with the escape key or not. */
   @Input()
@@ -152,6 +158,9 @@ export class MdDrawer implements AfterContentInit, OnDestroy {
   /** Event emitted when the drawer's position changes. */
   @Output('positionChanged') onPositionChanged = new EventEmitter<void>();
 
+  /** Event emitted when the drawer's mode changes. */
+  @Output('modeChanged') onModeChanged = new EventEmitter<void>();
+
   /** @deprecated */
   @Output('align-changed') onAlignChanged = new EventEmitter<void>();
 
@@ -359,6 +368,12 @@ export class MdDrawerContainer implements AfterContentInit {
         this._watchDrawerPosition(drawer);
       });
     });
+
+    this._drawers.forEach((drawer: MdDrawer) => {
+      drawer.onModeChanged.subscribe(() => {
+        this._watchDrawerToggle(drawer);
+      });
+    });
   }
 
   /** Calls `open` of both start and end drawers */
@@ -385,10 +400,8 @@ export class MdDrawerContainer implements AfterContentInit {
       this._changeDetectorRef.markForCheck();
     });
 
-    if (drawer.mode !== 'side') {
-      takeUntil.call(merge(drawer.onOpen, drawer.onClose), this._drawers.changes).subscribe(() =>
-          this._setContainerClass(drawer.opened));
-    }
+    takeUntil.call(merge(drawer.onOpen, drawer.onClose), this._drawers.changes).subscribe(() =>
+        this._setContainerClass(drawer.opened, drawer.mode == 'side'));
   }
 
   /**
@@ -406,8 +419,8 @@ export class MdDrawerContainer implements AfterContentInit {
   }
 
   /** Toggles the 'mat-drawer-opened' class on the main 'md-drawer-container' element. */
-  private _setContainerClass(isAdd: boolean): void {
-    if (isAdd) {
+  private _setContainerClass(isAdd: boolean, sideMode: boolean): void {
+    if (isAdd && !sideMode) {
       this._renderer.addClass(this._element.nativeElement, 'mat-drawer-opened');
     } else {
       this._renderer.removeClass(this._element.nativeElement, 'mat-drawer-opened');