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

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


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

Crear una lista con Drag and Drop con Angular Material consumiendo el API de RAWG.

Crear una lista con Drag and Drop con Angular Material consumiendo el API de RAWG.

Suculento tutorial para crear un lista con angular material utilizando drag and drop, listas de bootstrap y por ultimo consumiendo el API de RAWG que es bastante flexible y nos permite hacer peticiones sin necesidad de un token o api key.

Suscribete a mi canal



Link con el código fuente: https://gitlab.com/edisonjsapps/dragdroplist

Link del API de RAWG: https://api.rawg.io/docs/

Documentación API: https://api.rawg.io/docs/