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

Question

This example stays forever on the screen:

snack-bar-demo.ts

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)?

Holdfast

Answer 1

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);
    }

Backler

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 > "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)." – Holdfast

I don't think there is anything like that at the moment. If you look at the open method you won't find any timed dismissal procedure. That said, snack-bar status is still Proof-of-concept npm. They will probably/hopefully add that good stuff in to more closely align it to the intended design specs you linked. – Backler

Answer 2

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);
}

Piscary

Wow, you were quick. I wanted to update this too, was just waiting for the release :) Thank you. – Holdfast

Answer 3

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

Excommunicative

Answer 4

The duration can be pass via the optional configuration object:

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

Telemachus

Answer 5

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,
  });
}

Louanneloucks