fix(sidenav): resolve the promise when sidenav is initialized opened. (…

…angular#1666) Fixes angular#1382.
crisbeto · Nov 3, 2016 · a0d85d8 · a0d85d8
1 parent 83f6efc
commit a0d85d8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html
@@ -1,3 +1,5 @@
+<h2>Basic Use Case</h2>
+
 <md-sidenav-layout class="demo-sidenav-layout">
   <md-sidenav #start (open)="myinput.focus()" mode="side">
     Start Side Drawer
@@ -34,4 +36,14 @@ <h1>My Content</h1>
   </div>
 </md-sidenav-layout>
 
-<h2>Content after Sidenav</h2>
+<h2>Sidenav Already Opened</h2>
+
+<md-sidenav-layout class="demo-sidenav-layout">
+  <md-sidenav #start2 opened mode="side">
+    Drawer
+  </md-sidenav>
+
+  <div class="demo-sidenav-content">
+    <button md-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
+  </div>
+</md-sidenav-layout>
diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts
@@ -221,9 +221,12 @@ describe('MdSidenav', () => {
       endSidenavTransition(fixture);
 
       let sidenavEl = fixture.debugElement.query(By.css('md-sidenav')).nativeElement;
+      let testComponent = fixture.debugElement.query(By.css('md-sidenav')).componentInstance;
 
       expect(sidenavEl.classList).not.toContain('md-sidenav-closed');
       expect(sidenavEl.classList).toContain('md-sidenav-opened');
+
+      expect((testComponent as any)._openPromise).toBeNull();
     });
 
     it('should remove align attr from DOM', () => {

diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
@@ -45,7 +45,7 @@ export class MdDuplicatedSidenavError extends MdError {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MdSidenav {
+export class MdSidenav implements AfterContentInit {
   /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */
   @Input() align: 'start' | 'end' = 'start';
 
@@ -73,6 +73,15 @@ export class MdSidenav {
    */
   constructor(private _elementRef: ElementRef) {}
 
+  ngAfterContentInit() {
+    // This can happen when the sidenav is set to opened in the template and the transition
+    // isn't ended.
+    if (this._openPromise) {
+      this._openPromiseResolve();
+      this._openPromise = null;
+    }
+  }
+
   /**
    * Whether the sidenav is opened. We overload this because we trigger an event when it
    * starts or end.