fix: sidenav not showing when animation starts

Author: crisbeto

src/lib/sidenav/sidenav.ts

@@ -30,7 +30,6 @@ import {FocusTrapFactory, FocusTrap} from '../core/a11y/focus-trap';
 import {ESCAPE} from '../core/keyboard/keycodes';
 import {first} from '../core/rxjs/index';
 import {DOCUMENT} from '@angular/platform-browser';
-import {merge} from 'rxjs/observable/merge';
 
 
 /** Throws an exception when two MdSidenav are matching the same side. */
@@ -76,7 +75,7 @@ export class MdSidenavToggleResult {
   host: {
     'class': 'mat-sidenav',
     '[@transform]': '_getAnimationState()',
-    '(@transform.start)': '_isAnimating = true',
+    '(@transform.start)': '_onAnimationStart()',
     '(@transform.done)': '_onAnimationEnd($event)',
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
@@ -122,6 +121,9 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
   /** Whether the sidenav is opened. */
   private _opened: boolean = false;
 
+  /** Emits whenever the sidenav has started animating. */
+  _animationStarted = new EventEmitter<void>();
+
   /** Whether the sidenav is animating. Used to prevent overlapping animations. */
   _isAnimating = false;
 
@@ -255,6 +257,11 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
     return 'void';
   }
 
+  _onAnimationStart() {
+    this._isAnimating = true;
+    this._animationStarted.emit();
+  }
+
   _onAnimationEnd(event: AnimationEvent) {
     const {fromState, toState} = event;
 
@@ -361,9 +368,7 @@ export class MdSidenavContainer implements AfterContentInit {
    * is properly hidden.
    */
   private _watchSidenavToggle(sidenav: MdSidenav): void {
-    merge(sidenav.onOpenStart, sidenav.onCloseStart).subscribe(() => {
-      this._changeDetectorRef.markForCheck();
-    });
+    sidenav._animationStarted.subscribe(() => this._changeDetectorRef.markForCheck());
 
     if (sidenav.mode !== 'side') {
       sidenav.onOpen.subscribe(() => this._setContainerClass(true));
@@ -399,9 +404,7 @@ export class MdSidenavContainer implements AfterContentInit {
     this._start = this._end = null;
 
     // Ensure that we have at most one start and one end sidenav.
-    // NOTE: We must call toArray on _sidenavs even though it's iterable
-    // (see https://github.com/Microsoft/TypeScript/issues/3164).
-    for (let sidenav of this._sidenavs.toArray()) {
+    this._sidenavs.forEach(sidenav => {
       if (sidenav.align == 'end') {
         if (this._end != null) {
           throwMdDuplicatedSidenavError('end');
@@ -413,7 +416,7 @@ export class MdSidenavContainer implements AfterContentInit {
         }
         this._start = sidenav;
       }
-    }
+    });
 
     this._right = this._left = null;