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.

Suscribete a mi canal

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.

Recursos del tutorial

Link del repositorio del proyecto: https://gitlab.com/edisonjsapps/ngbootstrapyoutube

Link de la documentación de ng-bootstrap: https://ng-bootstrap.github.io