Uso de Angular & jQuery (Cuando no te queda de otra)
Para muchos programadores jQuery es una librería que está muriendo y de la cual deberíamos alejarnos lo más pronto posible. Sin embargo, es muy común encontrarnos con librerías de Javascript que son muy útiles para nuestros proyectos y tienen alta dependencia en jQuery.
Cuando nos topamos con esto tenemos dos opciones, o nos metemos a la librería para eliminar la dependencia de jQuery (Esto implica invertir mucho tiempo estudiando el código y modificándolo)o simplemente importamos jQuery antes que dicha librería (Obviamente esta opción es la mejor).
Esta dependencia de jQuery también la encontramos mucho en diferentes Templates de internet, sobre todo en los “Admin Dashboards” como el famoso AdminLTE.
Para mí que trabajo con Angular esto era un problema porque debido al ciclo de carga de las vistas de Angular algunos de los plugins y librerías no funcionaban a pesar de que implementaba jQuery en mi proyecto ya sea vía NPM o importando la librería de forma directa en el archivo index.html dentro de la carpeta “src” del proyecto.
Después de buscar las razones, me di cuenta que se debía a que en ocasiones Angular no cargaba la vista antes de que jQuery revisara el DOM para crear los diferentes elementos por lo que $(‘.mi-clase’).funcion() terminaba estando como indefinido.
Encontré en internet (¡Gracias Stack Overflow!) que debía de usar jQuery en el archivo de TypeScript del respectivo componente, ya sea como parte del método ngOnInit() o ngAfterViewInit().
De esta forma ya tenemos el código funcionando y pareciera que ya hemos terminado, pero como decía un maestro que tuve: “Sean finos ingenieros”. En este caso imaginemos que existen 50 componentes en tu software y que en cada uno estas implementando $(‘select’).formSelect() y por alguna razón la librería que utilizas ya no usa dicho método porque ahora es $(‘select’).selector(); ¡oh, no! tenemos un problema tedioso y que implicará tiempo de Copy&Paste de código y volver a pasar por todo el ciclo (Pruebas Unitarias, CI/CD, Git Develop a Git Stage…).
¿Qué pasa cuando tienes que inicializar múltiples componentes usando jQuery?
Definitivamente no es viable poner todo este código en cada componente que lo utilice, además de que estaríamos incumpliendo con Clean Code y con principios SOLID.
LA SOLUCIÓN…
En Angular tenemos los Servicios (Services) para ser implementados en los componentes en los que sean necesarios. Por eso lo primero será crear un servicio con el siguiente comando:
En el archivo creado implementamos las funciones tanto para las tabs y los form selects (Y todos lo que requieras). Esto es muy útil para los inicializadores de Javascript que utilizan los Templates; simplemente ve el ejemplo haciendo clic aquí.
Luego en tu componente simplemente importas el servicio, lo agregas al constructor y ¡voilà!
Espero que este artículo te sirva de algo, para tus futuros proyectos. Para mí, el ScriptsService se volvió un archivo por default para todos mis proyectos. Te recomiendo siempre buscar encapsular métodos en tus propias clases porque créeme que cuando algo cambia, es más fácil simplemente modificar un archivo que más de 50. Siempre debemos estar preparados para el cambio por parte del cliente, dueño del producto o inclusive en las mismas librerías.
