Para aquellos que vienen desarrollando soluciones del lado del Frontend hace unos 4 años o más, Sabrán perfectamente el procedimiento básico para hacer uso de una librería o ‘Plugin’ para quienes vienen de Wordpress.
Encontraremos entonces gran cantidad de material a usar en nuestros proyectos, mecanizando este proceso de estar llamando los assets (Ficheros como imágenes, hojas de estilo CSS o ficheros con extensión JS o Javascript) pertinentes, importando primero los ficheros relativos a estilos CSS y ficheros Javascript.
Con Angular 4 me surgió la duda tras leer comentarios de los alumnos como es de costumbre. Quise entonces intentar solucionar esto de estar manualmente colocando los ficheros en las carpetas dadas y referenciando o linkeando correctamente dichos ficheros en el tradicional ‘index.html’ sin valerme de ninguna herramienta de gestión integrada y eficiente de assets (Webpack).
Parece una tarea sencilla pero muchas veces queremos realizar esto al instante. El resultado básicamente lo describo en los siguientes pasos:
**Pasos para instalar SweetAlert 2 en nuestro proyecto de Angular 4 **
1 ). Detener la ejecución del proyecto que actualmente está corriendo en nuetro entorno local, para ello basta con presionar la combinación de teclas: “Ctrl + C” en el caso de windows.
2 ). Instalar a través de NPM la dependencia de sweetalert2 escribiendo en la consola de preferencia el siguiente comando (En mi caso tengo configurado GitBash en VisualStudio Code) y presionar ENTER:
npm install --save sweetalert2
3 ). En mi caso ya tenía instalada esta librería, sin embargo les comparto captura de pantalla después de haber ejecutado nuevamente el comando npm lo cual me dice que ha actualizado el paquete:
4 ). Cabe mencionar en este punto que he venido desarrollando el ejemplo del curso con algunas leves variaciónes en el nombrado de variables y comentado de código, por lo cual no verán una sintaxis al 100% limpia (comentarios excesivos) y optimizada, sin embargo no contiene errores y funciona como debe.
5 ). Importando la librería descargada:
import swal from'sweetalert2';
Notese del código anterior que NO está dentro de las tradicionales llaves {} donde se importa todo como un objeto.
Una muestra de donde lo ubiqué exactamente en mi fichero Typescript:
6 ). Uso de la librería:
Siguiendo con el curso del profesor hasta el punto de poder guardar y editar registros en Firebase como servicio, pues me enfocaré precisamente en integrar las alertas de Sweetalert2 en cada caso, sea Guardar un nuevo registro, o editar uno:
Primero se debe crear una variable tipo String en la seccion de definiciones global de la clase miembro:
swal('Registro exitoso...', this.titularAlerta, 'success');
Basta para desplegar una alerta haciendo referencia a la librería descargada, comparto una captura del bloque completo de esta sección:
Si notan bien la sintaxis anterior, el parámetro número dos de la función swal tiene “this.titularAlerta”, pues bien debemos definir esta variable miembro justo después de la definición global de la clase. Y dentro del cuerpo del método principal que crea o edita un registro, se asigna el texto relativo a la acción ejecutada: " Registro editado en Firebase, Registro almacenado en Firebase".
7 ). Ahora para Probar la funcionalidad corremos nuestra aplicación mediante el comando:
ng serve
De esta manera quise ilustrar el procedimiento básico sin resumir demasiado al punto que el desarrollador novato no tiene claridad en los pasos y tiende a cometer errores en la compilación y despliegue con “npm serve”. Al comienzo puede ser frustrante encontrarse con errores pero la clave está en tener paciencia para centrarse detenidamente en el error y poder llegar a una solución. Pero sobre todo, practicar y practicar con ejemplos y código fuente (lectura y escritura).
Saludos.
Muchas Gracias! Me salvaste jaja