• slidebg1

Directivas en Angular2


A estas alturas todo desarrollador que se precie conoce Angular2. Un framework para desarrollo web que está empezando a cobrar mucha fuerza y cada vez con metas más elevadas, estamos hablando de las famosas aplicaciones híbridas, que cada vez van cobrando más presencia en los desarrollos actuales, y un poco más lejos, las PWA o progressive web apps, cosa que seguramente en poco tiempo oigamos repetidas veces en el mundillo de la tecnología.

Pero no nos perdamos, vayamos directos al tema principal de este post. Las directivas, vamos a ver qué son, cómo se hacen y lo más interesante, por qué son tan útiles! En mi opinión las directivas son una de las características a destacar de angular2.

 

¿Qué es una directiva?

 

Una directiva se representa como un atributo en una etiqueta HTML, este atributo está dotando al elemento del DOM que la contiene de un comportamiento, ése comportamiento lo definimos nosotros y se puede utilizar en todos los elementos que queramos.

Te voy a poner un ejemplo, puede que no lo sepas pero si estás desarrollando en angular2 te puedo asegurar con un 0,01% de margen de error que estás usando directivas ¿Lo comprobamos?

Si has utilizado *ngIf, *ngFor, *ngSwitch, etc, amigo mío, estás utilizando directivas. Si, eso son directivas, que vienen en el core de angular2, y creo que coincidiras conmigo en que nos facilitan la vida en muchas ocasiones a la hora de desarrollar. 

Bueno, pues hoy vamos a ver cómo podemos crearnos nuestra propia directiva y utilizarla en nuestro proyecto!

 

¿Cómo creo una directiva?

 

Ha llegado el momento de ponernos manos a la obra, cómo creo una directiva, pues gracias a angular-cli, nuestro gran amigo, es tan sencillo como esto.

ng generate directive $nombre_de_nuestra_directiva

¿Qué sencillo no? Gracias angular-cli! Pero no cantemos victoria antes de tiempo, todavía nos queda camino. Veamos qué ha ocurrido con el comando anterior...

Esto ha creado el siguiente fichero $nombre_de_nuestra_directiva.directive.ts y ha modificado el app.module.ts añadiendo nuestra nueva directiva al módulo (también nos crea un .spec.ts para hacer el testing, pero hoy no es el tema que nos trae aquí) veamos qué estructura tiene una directiva!

 

¿No es muy complicado no? Vemos que hay un decorador @Directive con una propiedad “selector” donde pondremos el nombre de nuestra directiva. El nombre que pongamos en esta propiedad será el mismo nombre que tendrá el atributo html. En breves lo veremos con más detalle, pero antes, vamos a completar esta directiva! 

Vamos a añadirle lo básico para trabajar, el elemento html con el que va a utilizar y un par de eventos, cuanto entre el ratón y cuando salga.

 

Aquí hemos introducido dos conceptos, el @HostListener y el ElementRef, pero que no te asusten, son de hecho bastante simples de entender.

ElementRef: Aquí no hay complicación alguna, esto es una referencia al elemento html que contiene la directiva. Solo hay que saber cómo se accede, cosa que veremos en breves momentos :D

@HostListener: Nos da la capacidad de escuchar eventos del elemento que contiene la directiva. En este caso ‘mouseenter’ y ‘mouseleave’. Justo debajo la función que se va a ejecutar cuando ocurra. ¿Cómo lo ves?

Por cierto! No te olvides de importar HostListener y ElementRef

 

Muy interesante, pero esto... ¿ Cómo lo utilizo ?

 

Por supuesto! Ahora toca darle una utilidad a nuestra primera directiva! Ahora ya estamos preparados para ello.

Propongo que la primera versión de nuestra directiva sirva para cambiar el background-color del elemento html que la contenga. Cuando el ratón esté encima cambiará el fondo a Rojo y cuando no lo dejará en verde

¿Qué hay que hacer para conseguirlo? Tendría que quedar un código parecido a este. 

 

Ahora le toca el turno al fichero .html, utilizamos la directiva de la siguiente forma.

No hace falta importar nada en el componente, solo tiene que estar importando en el módulo (En nuestro caso app.module.ts) y ya es accesible en todos los componentes de nuestro módulo 


Y el resultado será muy parecido a este: 

 

¿No ha sido nada difícil verdad? Pero coincidiras conmigo en que tal como está no nos vale para mucho. Que tal si a la directiva le pasamos un parámetro para decirle el color de fondo que queremos. Esto estaría mucho mejor no? Vamos a ver como!

 

 

Bien! ¿Qué hemos hecho? Muy fácil! Hemos utilizado @Input para recibir el parámetro (IMPORTANTE la variable que asigna @Input tiene el mismo nombre que el selector de la directiva, si no, no funcionará) El parámetro que recibimos lo hemos utilizado para asignarle el color de fondo. Esto tiene el siguiente resultado:

Parece que esto ya tiene otro color no? Como vemos no ha sido difícil de implementar y ganamos que solo hemos tenido que programar el comportamiento una vez y ahora es utilizable en toda la aplicación!

 

Conclusión

 

Estoy seguro de que esto te puede dar grandes ideas a la hora de desarrollar un proyecto, es un paso más para hacer que el código trabaje con nosotros y no contra nosotros. Hasta aquí post de hoy sobre directivas en angular2, espero que os haya gustado!

 

 

Públicado el 23/11/2017

Comparte este post:

CATEGORÍAS: Actualidad Aprendizaje Desarrollo