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í:

import {MatSnackBarModule} from '@angular/material/snack-bar';

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

@NgModule({
  declarations: [
    //...
  ],
  imports: [
    //...
    MatSnackBarModule, // <-- Aquí
    //...,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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:

import {MatSnackBar} from "@angular/material/snack-bar";

E inyectarlo en el constructor de tu componente:

constructor(private snackBar: MatSnackBar) {
}

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.

this.snackBar.open("Probando snackbar en parzibyte.me");
snackbar con angular material

Snackbar con acción

Snackbar con acción en Angular Material

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:

const miSnackBar = this.snackBar.open("Producto eliminado", "Deshacer");
miSnackBar.onAction().subscribe(() => {
  alert("Presionaste la acción!");
});

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:

const miSnackBar = this.snackBar.open("Producto eliminado", "Deshacer");
miSnackBar.afterDismissed().subscribe(() => {
  alert("Snackbar se ha ocultado");
});

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:

this.snackBar.open("Producto guardado", "", {
  duration: 1500,
  horizontalPosition: "start",
  verticalPosition: "top",
});

El resultado es:

Personalizar snackbar en Angular Material

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.

 

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.