En el artículo de Introducción a las directivas y tipos de directivas en Angular ya estuvimos viendo como subdividimos a las directivas e hicimos una explicación principalmente teórica sobre los tipos de directivas disponibles en Angular.

En este, tal y como os prometí, nos vamos a centrar en la práctica, explicando con profundidad las principales directivas de componentes. A modo de repaso vamos a repasar nuevamente dichas directivas.

Directivas de componente:

– Directivas de componentes: una clase sin nada más para Angular es una clase sin más. Si la combinamos con un decorador es cuando obtiene el protagonismo suficiente para por ejemplo ser un componente (gracias al decorador @Component) o un módulo (gracias al decorador @NgModule).

Las directivas de componentes se subdividen en:

      • Directivas de Angular (Angular Directives): @Component, @Module, etc. Sobre este tipo de directivas que ya trae predefinidas Angular no nos vamos a detener, ya que un ejemplo de este tipo de directiva podría ser la directiva @Component. Si hacéis memoria en el artículo de Como crear un componente en Angular ya expliquemos en profundidad que nos permitía crear un componente y vimos la forma tanto de crearlo de manera manual como mediante al CLI de Angular.
      • Directivas customizadas (Custom Directives): creadas por los desarrolladores mediante a la instrucción: ng g directives [nameofdirective]

Directivas customizadas (Custom Directives):

Vamos a crear una directiva personalizada desde 0, que nos permita cambiar los estilos de nuestros elementos HTML.

Para ello, primeramente, vamos a instalar un plugin llamado Auto Import. Este plugin, nos va a permitir analizar, buscar y proporcionarnos todas las importaciones disponibles. Es decir, nos va a auto importar automáticamente rutas de nuestros Componentes, Servicios, etc en TypeScript sin necesidad de que nosotros realicemos la pesada tarea de escribir los imports manualmente.

Si ahora vamos a nuestro módulo principal app.module.ts y eliminamos el import del componente:

Y volvemos a reescribir a escribir el nombre del componente que viene por defecto en Angular, podemos ver que nos aparece auto import:

Vemos que automáticamente se nos ha auto importado nuestro componente App.componente:

Para crear una directiva tenemos que ejecutar el comando:

ng generate directive <name> [options]
ng g directive <name> [options]

Ambas maneras nos crearán una directiva la única diferencia entre ellas es que la 2ª manera es una abreviatura de la 1ª.

Podemos ver que la directiva se a autoimportado y que además se ha añadido dentro del decorador @NgModule concretamente en el interior del array de declarations (el proceso en nuestro module es el mismo que cuando añadimos un componente a nuestro proyecto: un import y añadirlo al array de componentes).

Si nos fijamos mediante a este comando, hemos creado dos ficheros:

  • color-picker.directive.spec.ts: contiene los test unitarios de la directiva que acabamos de crear.
  • color-picker.directive.ts: es el archivo que contiene la estructura básica de la directiva mediante el que le añadiremos la funcionalidad al elemento del DOM sobre el que apliquemos dicha directiva de nuestro template (vista) HTML.

Si analizamos la estructura de nuestra directiva:

Podemos observar que no es nada más y nada menos que una clase que acaba su nombre con Directive y que viene acompañada de un export para que pueda ser importar/visible desde otros archivos.

La declaración de exportación le dice a TypeScript que esta directiva es pública y accesible desde otros elementos de nuestro módulo de la aplicación.

Además, podemos ver que importamos una interfaz (Directive) que nos permitirá indicarle a Angular que estamos creando las directivas mediante a su decorador @Directive que contendrá el selector (es decir, el nombre) mediante al cual referirnos a dicha directiva.

Para asociar dicha directiva a nuestro elemento de HTML (por ejemplo, a un DIV) utilizamos su selector de la siguiente manera:

De hecho, podemos escribir un console.log para ver si se ejecuta nuestra directiva:

De hecho, si vamos al inspector de nuestro navegador, podemos ver que la directiva se ha aplicado correctamente:

Y si vamos a la consola que el mensaje de ha ejecutado correctamente:

Por lo que ya tenemos nuestra directiva funcionando.

Ejemplo 1:

Vamos a realizar un ejemplo mediante al evento doble click el cual nos mostrará por pantalla Haz hecho doble click

Para ello, vamos a nuestra directiva y vamos a trabajar con el decorador @Hostlistener mediante al cual declaramos un evento que escuchará al DOM y nos proporcionará un método para poder controlar la ejecución de dicho evento.

Bien, vamos a añadir otro HostListener que nos va a permitir crear el evento click (simple) y mostraremos por pantalla Haz hecho un click.

Si vamos al navegador podemos ver que al hacer click en dicho evento tanto simple o doble nos aparece por la consola.

Para hacer un doble click podemos ver que necesitamos realizar dos click simple lo que provocará la ejecución del evento click dos veces y posteriormente será cuando se ejecute nuestro evento de doble click.

Ejemplo 2:

En este ejemplo dos no vamos a mostrar mensajes por consola, sino que, lo que vamos a hacer será mucho más visual. Para ello, vamos a cambiarle el color al texto y al background de nuestro DIV:

¿Qué es ElementRef?

Para ello, utilizaremos ElementRef que nos permitirá acceder directamente al DOM de una forma bastante sencilla. Aunque no es el objetivo del curso, hay que destacar que no es la mejor manera de trabajar desde Angular 10 y versiones anteriores, ya que hace a nuestra aplicación más suceptible, más vulnerable a los ataques XSS.

Además, ninguno de estos elementos estará disponible en un entorno que no sea el navegador, y, por tanto, no podrás reutilizar un código que contenga ElementRef para renderizar hacía el server (con Angular Universal), hacer una app nativa, etc. La alternativa más recomendable sería utilizar Renderer2.

Angular ElementRefes un envoltorio alrededor de un elemento nativo dentro de una Vista.

Por tanto, ElementRef, es una clase que envuelve los elementos DOM nativos en el navegador y nos permite trabajar con el DOM proporcionándonos el nativeElementobjeto (el elemento nativo) junto al conjunto de todos sus métodos y propiedades.

Y una vez declarado el elemento con ElementRef dentro del constructor ya podemos utilizarlo dentro de los eventos @HostListener de la siguiente manera:

Si arrancamos nuestra aplicación de Angular podemos que se visualizar como anteriormente:

Si hacemos un click, podemos ver que se cambia el color:

Si hacemos doble click, podemos ver que vuelve a cambiar de color:

De hecho, podemos hasta imprimir el elemento al que estamos referenciando mediante a ElementRef:

Y finalmente, podríamos refactorizar nuestro código de la siguiente manera:

Ejemplo 3:

Vamos a añadir unos radiobuttons con varias opciones que nos permitirán cambiar el color del background de nuestro div. Para ello realizamos:

Y podemos ver que funciona correctamente:

Ahora, además de esto, podemos cambiar también el color de texto para ello, vamos a crear un objeto mediante el que le pasaremos a nuestra directiva los dos valores:

Ejemplo 4:

Vamos a hacer lo que se conoce como un ColorPicker que nos abrirá la paleta de colores y podremos cambiar el fondo de dicho div:

Si ahora vamos a nuestro navegador podemos ver que se nos carga por defecto de la siguiente manera:

Si seleccionamos un color podemos ver que nos cambia el color:

Esto es todo por hoy, espero que os haya gustado ¡Un saludo!