En este post te mostraré cómo lanzar o mostrar un Snackbar en Angular Material, es decir, el paquete que combina los estilos Material Design para el framework Angular.

Importar snackbar

En app.module.ts importa a MatSnackbarModule así:

See the gist on github.

Después colócala dentro de imports en el mismo archivo:

See the gist on github.

Lo anterior solo se debe hacer una vez. Lo que viene a continuación se hace por cada componente en donde lo vayas a usar (y si encuentras la manera de encapsular todo en una función para reutilizar código, eres libre de ello)

Ahora cada que quieras usar el SnackBar con Angular material debes importar a MatSnackBar:

See the gist on github.

E inyectarlo en el constructor de tu componente:

See the gist on github.

Ahora sí veamos cómo mostrar snackbars en Angular.

Mostrar simple Snackbar

Lo único que necesitas es invocar al método open con el mensaje que quieres mostrar. Recuerda que snackBar es el nombre de la variable que inyectamos en el constructor para usar a MatSnackBar.

See the gist on github.

Snackbar con acción

Igualmente puedes pasar una acción en forma de cadena como segundo argumento. Por defecto, el segundo argumento es una cadena vacía.

Para saber si el usuario hace click en la acción debes suscribirte al observable que devuelve onAction:

See the gist on github.

Nota: no sé si solo me pasa a mí, pero cuando uso este método el snackbar no se oculta automáticamente. Sigue leyendo para ver cómo indicar el tercer argumento para la configuración

Saber cuando snackbar se oculta

Del mismo modo que puedes escuchar cuando se selecciona la acción del snackbar, puedes saber cuando el snackbar se oculta:

See the gist on github.

Personalizar snackbar

Finalmente veamos el ejemplo para configurar el snackbar. Por ejemplo, el tiempo que debe pasar para que se oculte, su posición, etcétera.

En este caso yo no quiero que se muestre la acción así que paso una cadena vacía:

See the gist on github.

El resultado es:

Podría seguir con más ejemplos, pero mejor te dejo el enlace a la documentación oficial, igual y cuando leas esto las cosas han cambiado.