How can I set duration of a snack-bar in angular2 (material2)

Question

This example stays forever on the screen:

import {Component, ViewContainerRef} from '@angular/core';
import {MdSnackBar, MdSnackBarConfig} from '@angular/material';

@Component({
  moduleId: module.id,
  selector: 'snack-bar-demo',
  templateUrl: 'snack-bar-demo.html',
})
export class SnackBarDemo {
  message: string = 'Snack Bar opened.';
  actionButtonLabel: string = 'Retry';
  action: boolean = false;

  constructor(
      public snackBar: MdSnackBar,
      public viewContainerRef: ViewContainerRef) { }

  open() {
    let config = new MdSnackBarConfig(this.viewContainerRef);
    this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
  }
}

How can I make it disappear after 2 seconds (set duration/timeout somehow)?

score 13 · Answer 1 · answered Dec 09 '16 at 07:58

13

With angular material 2.0.0-alpha.11, You can now add timeout to snackbar.

open() {
    let config = new MdSnackBarConfig();
    config.duration = 10;
    this.snackBar.open("Message", "Action Label", config);
}

answered Dec 09 '16 at 07:58

Narendra CM

1,416
3
13
23

Wow, you were quick. I wanted to update this too, was just waiting for the release :) Thank you. – j809809jkdljfja Dec 09 '16 at 19:59

score 9 · Accepted Answer · answered Oct 28 '16 at 18:23

9

this should work

open(msg,t=2000) {
        let config = new MdSnackBarConfig(this.viewContainerRef);
        let simpleSnackBarRef = this.snackBar.open(msg, 'ok, gotcha', config);
        setTimeout(simpleSnackBarRef.dismiss.bind(simpleSnackBarRef), t);
    }

answered Oct 28 '16 at 18:23

undefinederror

821
1
8
16

This works. Thank you!! I just wonder whether you actually do this this way to achieve designed behavior or there is something already in MdSnackBar impelemented as described here: [snack-bar](https://material.google.com/components/snackbars-toasts.html#snackbars-toasts-usage) > "They exit by being swiped off-screen or automatically disappear after a timeout or user interaction elsewhere (such as summoning a new surface or activity)." – j809809jkdljfja Oct 29 '16 at 13:53
I don't think there is anything like that at the moment. If you look at the [open](https://github.com/angular/material2/blob/master/src/lib/snack-bar/snack-bar.ts) method you won't find any timed dismissal procedure. That said, snack-bar status is still _Proof-of-concept_ [npm](https://www.npmjs.com/package/@angular/material). They will probably/hopefully add that good stuff in to more closely align it to the intended design specs you linked. – undefinederror Nov 04 '16 at 17:01

score 6 · Answer 3 · edited May 13 '21 at 14:34

6

this._snackBar.open('Your Text','',
    { 
      duration: 2000
  });

edited May 13 '21 at 14:34

Tomerikoo

18,379
16
47
61

answered May 13 '21 at 11:55

BALU NANDAM

71
1
1

score 4 · Answer 4 · edited May 25 '17 at 00:59

4

The duration can be pass via the optional configuration object:

this.snackBar.open(
    this.message,
    this.action && this.actionButtonLabel, { 
        duration: 2000
    }
);

edited May 25 '17 at 00:59

snorkpete

14,278
3
40
57

answered May 24 '17 at 19:50

Kenton Lin

41
1
3

score 1 · Answer 5 · answered Apr 27 '22 at 04:13

You can do like this (angular 8+)

openMessageSnackBar("Server error", "OK");

openMessageSnackBar(message: string, action: string) {
  this._snackBar.open(message, action, {
    horizontalPosition: "center",
    verticalPosition: "left",
    duration: 5000,
  });
}

How can I set duration of a snack-bar in angular2 (material2)

5 Answers5