Snackbar

The Snack Bar component provides feedback about an operation with a single-line message, which can include a link to an action such as Undo. The Snack Bar message appears above all other screen elements, located at the bottom of a mobile device screen or at the lower left of larger device screens.

Snackbar Demo

Usage

Snackbar with button and action

<button (click)="snackbar.show()">Show snackbar</button>

<igx-snackbar #snackbar
            message="This is a simple snackbar!">
</igx-snackbar>

You can be more descriptive and set message message="This is a simple snackbar!".

You can show the snackbar by using snackbar.show() method.

Snackbar with button and action

<button (click)="snackbar.show()">Show snackbar</button>

<igx-snackbar #snackbar
             message="This is a snackbar with a button and action!"
             actionName="Dismiss"
             (onAction)="snackbar.hide()">
</igx-snackbar>

You can set the title of the button by setting actionName="Dismiss";

You can hide the Snackbar by using snackbar.hide() method.

The Snackbar will be automatically hidden after 10000 milliseconds, this can be controlled by the displayTime attribute. The automatic hiding can be also controlled by using the autoHide attribute.