Creación de Directivas Personalizadas en Angular para Manipular el DOM

Directivas en Angular (II)

En el desarrollo de aplicaciones web, a menudo nos encontramos con la necesidad de realizar manipulaciones en el DOM para lograr ciertos comportamientos o estilos específicos. En Angular, las directivas personalizadas nos permiten extender el poder de la plataforma y crear componentes reutilizables que manipulan directamente el DOM. En este artículo, exploraremos cómo crear y utilizar directivas personalizadas en Angular para tener un mayor control sobre el DOM y mejorar la interacción en nuestras aplicaciones.

Las directivas personalizadas nos permiten extender el poder de la plataforma y crear componentes reutilizables que manipulan directamente el DOM.

Como vimos en la primera clase del módulo, una directiva es una clase que agrega comportamiento a un elemento del DOM. Las directivas nos permiten extender el HTML con nuevas funcionalidades y personalizar el comportamiento de los elementos.

Creación de una directiva personalizada

Para crear una directiva personalizada en Angular, debemos seguir los siguientes pasos:

1.- Abre una terminal y ejecuta el siguiente comando en la raíz de tu proyecto Angular:

ng g d hover-highlight

Esto generará automáticamente los archivos necesarios para tu nueva directiva en la carpeta correspondiente.

2.- Implementar la lógica de la directiva

Abre el archivo hover-highlight.directive.ts recién generado. Verás un esqueleto básico de la directiva. Aquí es donde puedes implementar la lógica de la directiva.

El esqueleto básico de una directiva en Angular consiste en un decorador, una clase y posiblemente algunos métodos y propiedades. Aquí un pequeño resumen de cada parte:

Decorador

El decorador @Directive es utilizado para indicar que una clase es una directiva en Angular. Recibe un objeto de configuración con una serie de propiedades, siendo la más importante el selector, que define cómo se aplicará la directiva en los elementos del DOM.

Clase

La clase de la directiva contiene la lógica y funcionalidad de la misma. Aquí es donde implementarás los métodos y propiedades necesarios. Puedes inyectar dependencias en el constructor de la clase para utilizar servicios u otras funcionalidades.

Métodos y propiedades

Dentro de la clase de la directiva, puedes definir métodos y propiedades para agregar la funcionalidad deseada. Puedes utilizar decoradores como los siguientes:

• @Input: Se utiliza para definir una propiedad de entrada en la directiva. Permite que los valores sean pasados a la directiva desde su elemento padre.
• @Output: Se utiliza para definir una propiedad de salida en la directiva. Permite que la directiva emita eventos hacia su elemento padre.
• @HostListener: Se utiliza para escuchar eventos en el elemento en el que se aplica la directiva. Permite ejecutar una función cuando ocurre un evento específico.
• @HostBinding: Se utiliza para enlazar propiedades del elemento en el que se aplica la directiva. Permite establecer valores de propiedades del elemento directamente desde la directiva.
• @ViewChild: Se utiliza para obtener una referencia a un elemento hijo dentro de la directiva. Permite acceder y manipular el elemento hijo desde la directiva.
• @ContentChild: Se utiliza para obtener una referencia a un contenido proyectado dentro de la directiva. Permite acceder y manipular el contenido proyectado desde la directiva.

Por ejemplo, una implementación de la directiva HoverHighlight sería:

hoverhighlight.directive.ts

Utilizar la directiva

Ahora puedes utilizar la directiva en tus componentes. Abre el archivo de un componente y agrega la directiva a un elemento HTML:

app.component.html

Para poder recibir el evento clickElement debemos implementar su método correspondiente:

app.component.ts

Abre tu aplicación en el navegador y deberías ver el elemento resaltado cuando pasas el mouse por encima y si haces clic sobre el elemento deberías ver el siguiente mensaje en tu consola del navegador:

DevTools > Console

¡Enhorabuena! Has creado tu propia directiva en Angular.

Recuerda que este es solo un ejemplo básico para mostrarte cómo crear una directiva. Puedes personalizarla y agregar más funcionalidades según tus necesidades. ¡Si tienes más preguntas, no dudes en hacerlas!