Angular 2/5 – Notificaciones de alerta (Toaster)

Los mensajes de alerta (también conocidos como toaster) son un requisito muy común en aplicaciones web para mostrar notificaciones de estado al usuario. Estos mensajes pueden ser errores, mensajes de éxito, avisos o información general.
Este tutorial nos muestra como implementar un servicio y un componente de notificaciones toaster sencillo y reusable en una aplicación Angular usando TypeScript. El componente de alerta en la aplicación de ejemplo usa código de una aplicación web que desarrollé recientemente para una empresa legal de Sydney. Soporta mostrar múltiples notificaciones de alerta al mismo tiempo, así como mantener las alertas después de un cambio de ruta, lo cual puede usarse cuando queremos mostrar una notificación después de un cambio de ruta, por ejemplo mostrando un mensaje de éxito después de que un usuario registra una cuenta y es redirigido a la página de conexión (login).
El código de este proyecto está disponible en GitHub https://github.com/cornflourblue/angular2-alert-notifications

Notificiaciones de alerta / toaster en Angular 2-5

Aquí está la aplicación ejemplo del tutorial en acción, incluye botones para mostrar diferentes tipos de mensajes de alerta / toasters, y para limpiar los mensajes:
http://plnkr.co/edit/gDrxfK?p=preview

Ejecutando el ejemplo de alertas / toaster Angular 2-5 localmente

Para añadir alertas a la aplicación Angular 2-5 necesitamos copiar las siguientes líneas del proyecto de ejemplo:

  • app/_directives/alert.component.html – plantilla de la directiva que contiene el html para mostrar alertas.
  • app/_directives/alert.component.ts – directiva de alertas que controla el añadido y eliminación de alertas.
  • app/_models/alert.ts – clase del modelo de alerta que define las propiedades de una alerta, incluye también el tipo de alerta (enum) que define los diferentes tipos de alerta.
  • app/_services/alert.service.ts – servicio de alertas que puede ser usado por cualquier componente de aplicación para enviar alertas al componente de alerta.

Actualiza AppModule para que incluya AlertComponent y AlertService

Para que la directiva del componente alerta y el servicio de alerta estén disponibles en tu aplicación tienes que añadirlos a las secciones de declaraciones y proveedores de app.module.ts. Aquí tenemos el módulo de la aplicación de ejemplo con las secciones de alerta comentadas.

Añade la etiqueta <tag> a la plantilla del componente

Añade la etiqueta de alert al fichero app.component.html donde queramos que se muestren los mensajes de alerta. Aquí tenemos la plantilla del componente para la aplicación de ejemplo, colocando la etiqueta de alert justo encima de la etiqueta router-outlet.

Mostrando las notificaciones de alerta / toaster en tu aplicación Angular 2-5

Una vez que hemos dado soporte a las notificaciones de alerta / toaster a nuestra aplicación mediante los pasos anteriores, podemos lanzar notificaciones de alerta desde cualquier componente de nuestra aplicación sencillamente inyectando el servicio de alerta y llamando uno de sus métodos para mostrar los diferentes tipos de alerta: success(), error(), info() y warn().
Aquí esta el componente Home de la aplicación de ejemplo que contienen métodos que pasan mensajes de notificación al servicio de alerta cuando cada uno de los botones es pulsado. En una aplicación real las notificaciones de alerta pueden ser disparadas por cualquier evento, por ejemplo un error de una petición http o un mensaje de éxito después de guardar el perfil de usuario.

Aquí está la plantilla del componente Home que contiene los botones vinculados a los métodos anteriores.

Desglose del código de las notificaciones de alerta / toaster en Angular 2-5

Aquí tenemos un desglose del código usado para implementar el ejemplo de las notificaciones de alerta / toaster en Angular 2-5. No es necesario conocer los detalles de su funcionamiento completo, tan sólo es por si nos interesa conocer hasta el mínimo detalle o si queremos modificar el código o su comportamiento.

Servicio de alerta Angular 2-5

El servicio de alerta actúa como puente entre cualquier componente de la aplicación Angular 2-5 y el componente alerta que realmente muestra el mensaje de alerta / toaster. Contiene métodos para enviar y limpiar mensajes de alerta, también se suscribe al evento del enrutador ‘NavigationStart’ para eliminar mensajes de forma automática cuando haya un cambio de ruta, a menos que el indicador ‘keepAfterRouteChange’ esté activo, en cuyo caso los mensajes de alerta permanecen al primer cambio de ruta y se borran en el siguiente cambio de ruta.
El servicio usa las clases Observable y Subject para permitir la comunicación con otros componentes. Para más información acerca de su funcionamiento ver Angular 2-5 – Comunicación entre componentes con Observable y Subject (en inglés).

Componente de directiva de alerta de Angular 2-5

La directiva de alerta controla el alta y eliminación de alertas, mantiene un array de alertas que muestra la plantilla del componente.
En el método ngOnInit el componente se suscribe al Observable devuelto desde el método alertService.getAlert(), el cual permite que el componente de alerta sea notificado cuando un mensaje de alerta se envía al servicio de alerta y lo añade al array de alertas a mostrar. Cuando una alerta vacía o no definida se recibe, el array de alertas se vacía.
El método cssClass() devuelve la clase CSS de Bootstrap correspondiente a cada tipo de alerta, si usamos un framework diferente podemos cambiar las clases CSS devueltas para que se adapten a nuestra aplicación.

Plantilla de la directiva de alerta de Angular 2-5

La plantilla de la directiva de alerta simplemente muestra un mensaje de alerta para cada elemento del array de alertas. Usamos Bootstrap para dar estilos a las notificaciones de alerta / toaster, pero podemos cambiar el html y las clases CSS para que se adapten a nuestra aplicación si no estamos usando Bootstrap.

Modelo de alerta y enum de tipo de alerta de Angular 2-5

La clase del modelo de alerta define las propiedades de cada objeto alerta, y el enum de tipo de alerta define los tipos de alerta permitidos en la aplicación.

Nota: puedes encontrar el artículo original en http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *