feat(snackbar): Auto Hide for Snackbar

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)]="autoHide">
+      <p *ngIf="!autoHide">Auto hide after duration</p>
+      <md-input type="number" class="demo-button-label-input"
+                *ngIf="autoHide"
+                placeholder="Auto Hide Duration in ms"
+                [(ngModel)]="autoHideMs"></md-input>
+    </md-checkbox>
+  </div>
 </div>
 
 <button md-raised-button (click)="open()">OPEN</button>

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

@@ -10,13 +10,19 @@ export class SnackBarDemo {
   message: string = 'Snack Bar opened.';
   actionButtonLabel: string = 'Retry';
   action: boolean = false;
+  autoHide: boolean = false;
+  autoHideMs: number | boolean;
 
   constructor(
       public snackBar: MdSnackBar,
       public viewContainerRef: ViewContainerRef) { }
 
   open() {
-    let config = new MdSnackBarConfig(this.viewContainerRef);
+    let autoHide: number | boolean = false;
+    if (this.autoHide) {
+      autoHide = this.autoHideMs;
+    }
+    let config = new MdSnackBarConfig(this.viewContainerRef, autoHide);
     this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
   }
 }

src/lib/snack-bar/README.md

@@ -15,7 +15,7 @@
 | `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. |
 | `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. |
 | `announcementMessage: string` | The message to announce with the snack bar. |
-
+| `autoHideDuration: number | boolean` | The number of milliseconds to wait before automatically dismissing. If no value is specified the snackbar will dismiss normally. |
 
 ### Example
 The service can be injected in a component.
@@ -30,7 +30,8 @@ export class MyComponent {
              viewContainerRef: ViewContainerRef) {}
 
  failedAttempt() {
-   config = new MdSnackBarConfig(this.viewContainerRef);
+   // This snackbar will dissmiss after 3s (3000ms)
+   config = new MdSnackBarConfig(this.viewContainerRef, 3000);
    this.snackBar.open('It didn\'t quite work!', 'Try Again', config);
  }
 

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

@@ -12,7 +12,16 @@ export class MdSnackBarConfig {
   /** The view container to place the overlay for the snack bar into. */
   viewContainerRef: ViewContainerRef;
 
-  constructor(viewContainerRef: ViewContainerRef) {
+  /*
+   * The number of milliseconds to wait before automatically dismissing.
+   * If no value is specified the snackbar will dismiss normally.
+   * If a value is provided the snackbar can still be dismissed normally.
+   * If a snackbar is dismissed before the timer expires, the timer will be cleared.
+   */
+  autoHideDuration: number | boolean;
+
+  constructor(viewContainerRef: ViewContainerRef, autoHideDuration: number | boolean = false) {
     this.viewContainerRef = viewContainerRef;
+    this.autoHideDuration = autoHideDuration;
   }
 }

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

@@ -19,6 +19,8 @@ export class MdSnackBarRef<T> {
   /** Subject for notifying the user that the snack bar has closed. */
   private _afterClosed: Subject<any> = new Subject();
 
+  autoHide: number;
+
   constructor(instance: T,
               containerInstance: MdSnackBarContainer,
               private _overlayRef: OverlayRef) {
@@ -36,6 +38,10 @@ export class MdSnackBarRef<T> {
         this._afterClosed.complete();
       });
     }
+    // Clear autohide interval
+    if (this.autoHide) {
+      clearInterval(this.autoHide);
+    }
   }
 
   /** Gets an observable that is notified when the snack bar is finished closing. */

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

@@ -21,8 +21,6 @@ import {MdSnackBarRef} from './snack-bar-ref';
 import {MdSnackBarContainer} from './snack-bar-container';
 import {SimpleSnackBar} from './simple-snack-bar';
 
-// TODO(josephperrott): Automate dismiss after timeout.
-
 
 /**
  * Service to dispatch Material Design snack bar messages.
@@ -56,6 +54,12 @@ export class MdSnackBar {
     } else {
       mdSnackBarRef.containerInstance.enter();
     }
+    // Auto dismiss after timeout.
+    if (config.autoHideDuration) {
+      mdSnackBarRef.autoHide = setTimeout(() => {
+        mdSnackBarRef.dismiss();
+      }, config.autoHideDuration);
+    }
     this._live.announce(config.announcementMessage, config.politeness);
     this._snackBarRef = mdSnackBarRef;
     return this._snackBarRef;