Serie - NgBootstrap

Como implementar el Widget Toast con Ng-Bootstrap y Angular 9

---

Compartir:  

Los Toasts proporcionan mensajes de retroalimentación como notificaciones al usuario. El objetivo es imitar las notificaciones push disponibles tanto en sistemas operativos móviles como de escritorio.

Componente Toast

El componente NgbToast le permite representar solo el marcado correspondiente. Úselo en una de sus plantillas y listo.

Sintaxis de un Toast

Para crear un toast usaremos la etiqueta ngb-toast y dentro de ella crearemos el contenido del toast

<ngb-toast>
 Contenido en la notificación.
</ngb-toast>

Atributos de un Toast

Para mostrar el toast vamos a utilizar una variable llamada mostrar de tipo boolean y con valor true en nuestro component.ts.

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-toast',
 templateUrl: './toast.component.html',
 styleUrls: ['./toast.component.css']
})
export class ToastComponent implements OnInit {
// variable boolean
mostrar:boolean=true;
// fin variable
 constructor() {
 }
 ngOnInit(): void {}
}

En nuestro toast vamos a usa la variable con un ngIf para hacerlo aparecer adicional vamos a crear un header con el texto "título del toast".

<ngb-toast 
*ngIf="mostrar" 
header="Título del Toast">
Contenido en la notificación.
</ngb-toast>

Ahora vamos a asignar un tiempo para desaparecer con el atributo [delay] y la opcion de esconderse con el atributo [autohide]

<ngb-toast 
*ngIf="mostrar" 
header="Titulo del Toast" 
[delay]="5000" 
[autohide]="true">
Contenido en la notificación.
</ngb-toast>

Estos atributos básicos ya podemos hacerlo desaparecer, pero aun falta un atributo mas, que sin el cual no podria funcionar completamente el toast y es el evento hide, sin este evento no se disparan ni el delay ni el autohide. A este evento hide debemos pasar la variable que creamos en el component.ts que se llamaba mostrar y le damos el valor de false.

<ngb-toast 
*ngIf="mostrar" 
header="Titulo del Toast" 
[delay]="3000" 
[autohide]="true"
(hide)="mostrar=false">
Contenido en la notificación.
</ngb-toast>

El evento hide nos permite que al aparecer el toast con un header podamos dar clic sobre la X para quitar el toast o sin hacer nada segun nuestro ejemplo en 5 segundos desaparezca el toast.

Y asi de sencillo podemos crear un toast e implementarlo facilmente.

Compartir:  

Suscribete a mi canal