Add timeout to snackbar

Author: josephperrott

src/demo-app/snack-bar/snack-bar-demo.html

@@ -10,6 +10,15 @@ <h1>SnackBar demo</h1>
                 [(ngModel)]="actionButtonLabel"></md-input>
     </md-checkbox>
   </div>
+  <div>
+    <md-checkbox [(ngModel)]="setAutoHide">
+      <p *ngIf="!setAutoHide">Auto hide after duration</p>
+      <md-input type="number" class="demo-button-label-input"
+                *ngIf="setAutoHide"
+                 placeholder="Auto Hide Duration in ms"
+                 [(ngModel)]="autoHide"></md-input>
+    </md-checkbox>
+  </div>
 </div>
 
 <button md-raised-button (click)="open()">OPEN</button>

src/demo-app/snack-bar/snack-bar-demo.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MdSnackBar} from '@angular/material';
+import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -10,11 +10,15 @@ export class SnackBarDemo {
   message: string = 'Snack Bar opened.';
   actionButtonLabel: string = 'Retry';
   action: boolean = false;
+  setAutoHide: boolean = true;
+  autoHide: number = 0;
 
   constructor(
       public snackBar: MdSnackBar) { }
 
   open() {
-    this.snackBar.open(this.message, this.action && this.actionButtonLabel);
+    let config = new MdSnackBarConfig();
+    config.autoHide = this.autoHide;
+    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

src/lib/snack-bar/snack-bar-config.ts

@@ -13,4 +13,7 @@ export class MdSnackBarConfig {
 
   /** The view container to place the overlay for the snack bar into. */
   viewContainerRef?: ViewContainerRef = null;
+
+  /** The length of time in milliseconds to wait before automatically dismissing the snack bar. */
+  autoHide?: number = 0;
 }

src/lib/snack-bar/snack-bar.spec.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core/testing';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
 import {MdSnackBar, MdSnackBarModule} from './snack-bar';
+import {MdSnackBarConfig} from './snack-bar-config';
 import {OverlayContainer, MdLiveAnnouncer} from '../core';
 import {SimpleSnackBar} from './simple-snack-bar';
 
@@ -287,6 +288,27 @@ describe('MdSnackBar', () => {
 
       tick(500);
     }));
+
+    it('should dismiss automatically after a specified timeout', fakeAsync(() => {
+      let dismissObservableCompleted = false;
+      let config = new MdSnackBarConfig();
+      config.autoHide = 250;
+      let snackBarRef = snackBar.open('content', 'test', config);
+      snackBarRef.afterDismissed().subscribe(null, null, () => {
+        dismissObservableCompleted = true;
+      });
+
+      viewContainerFixture.detectChanges();
+      viewContainerFixture.whenStable().then(() => {
+        expect(dismissObservableCompleted).toBeFalsy('Expected the snack bar not to be dismissed');
+      });
+
+      tick(1000);
+      viewContainerFixture.detectChanges();
+      viewContainerFixture.whenStable().then(() => {
+        expect(dismissObservableCompleted).toBeTruthy('Expected the snack bar to be dismissed');
+      });
+    }));
 });
 
 @Directive({selector: 'dir-with-view-container'})

src/lib/snack-bar/snack-bar.ts

@@ -22,8 +22,6 @@ import {MdSnackBarContainer} from './snack-bar-container';
 import {SimpleSnackBar} from './simple-snack-bar';
 import {extendObject} from '../core/util/object-extend';
 
-// TODO(josephperrott): Automate dismiss after timeout.
-
 
 /**
  * Service to dispatch Material Design snack bar messages.
@@ -64,6 +62,10 @@ export class MdSnackBar {
     } else {
       snackBarRef.containerInstance.enter();
     }
+    if (config.autoHide > 0) {
+      setTimeout(() => snackBarRef.dismiss(), config.autoHide + 225);
+    }
+
     this._live.announce(config.announcementMessage, config.politeness);
     this._snackBarRef = snackBarRef;
     return this._snackBarRef;