diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index 232a83f6a643..b1b24f1b1f3e 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -10,6 +10,15 @@

SnackBar demo

[(ngModel)]="actionButtonLabel"> +
+ +

Auto hide after duration

+ +
+
\ No newline at end of file diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 72a8710984c6..c19d9044464b 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/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); } } diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md index 96f39ce98467..d5369e8a0986 100644 --- a/src/lib/snack-bar/README.md +++ b/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); } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 8eaebb8202cc..a8b28721e4ff 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/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; } } diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index 5b088df78c4f..a24385c88a8c 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -19,6 +19,8 @@ export class MdSnackBarRef { /** Subject for notifying the user that the snack bar has closed. */ private _afterClosed: Subject = new Subject(); + autoHide: number; + constructor(instance: T, containerInstance: MdSnackBarContainer, private _overlayRef: OverlayRef) { @@ -36,6 +38,10 @@ export class MdSnackBarRef { 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. */ diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index e2f2c5003c4a..ed469b6a4fb7 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/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;