Angular incluye un conjunto de directivas integradas como ngIf, ngFor y ngClass. Sin embargo, también es posible crear directivas personalizadas para gestionar tareas específicas en tu aplicación. A continuación, se explica cómo construir una con un ejemplo práctico.

Generar la Directiva Personalizada

Primero, es recomendable organizar el código creando una carpeta dedicada para las directivas. Llamémosla directives.

Este comando crea una nueva carpeta llamada directives dentro del directorio app y agrega el nuevo archivo de la directiva en su interior:

• highlight-on-complete.directive.ts – contiene la lógica de la directiva;

• highlight-on-complete.directive.spec.ts – archivo de pruebas unitarias (puedes eliminarlo si no es necesario).

A continuación se muestra la estructura básica de la directiva:

Definir la Función de la Directiva

Esta directiva resaltará un elemento de tarea en verde si está marcado como completado. De lo contrario, eliminará los estilos.

Para indicar a Angular que esta clase es una directiva, se decora con @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

El selector [appHighlightOnComplete] indica que la directiva se utilizará como un atributo, no como una etiqueta ni como una directiva estructural.

En tu HTML, lo aplicarás de la siguiente manera:

<div [appHighlightOnComplete]="task.completed"></div>

Hacer que la Directiva Reaccione a los Cambios

Para detectar cambios en la entrada completed, implementamos la interfaz OnChanges:

También definimos una propiedad de entrada para recibir el valor desde el componente:

Qué hace esto:

• Informa a Angular que el valor será proporcionado desde la plantilla (anteriormente, pasamos task.complete desde la plantilla);

• Vincula la propiedad interna completed de la directiva al valor pasado desde la plantilla;

• Establece un valor predeterminado de true (que será sobrescrito una vez que se reciba el dato real).

Acceso seguro al DOM

Angular utiliza la inyección de dependencias para proporcionar acceso al DOM y a las herramientas de renderizado.

En el constructor, inyectamos:

ElementRef nos proporciona una referencia al elemento DOM anfitrión. Renderer2 nos permite modificar de forma segura los estilos y atributos sin manipular directamente el DOM.

Reacción a cambios con ngOnChanges

Ahora implementemos la lógica principal en ngOnChanges, que se ejecuta cada vez que cambia el valor de entrada.

Implementación completa:

El método ngOnChanges se activa cada vez que Angular detecta cambios en las propiedades de entrada de la directiva.

En este caso, responde a las actualizaciones del valor completed pasado desde la plantilla. Si completed es true, la directiva añade un borde verde y un fondo verde claro al elemento. Si es false, esos estilos se eliminan, devolviendo el elemento a su apariencia original. Esto proporciona una indicación visual de las tareas completadas.

Esta directiva personalizada permite encapsular el comportamiento de estilos de manera reutilizable y ordenada. Ahora se puede aplicar a cualquier elemento en la aplicación, sin duplicar la lógica en los componentes. Es un excelente ejemplo de cómo el sistema de directivas de Angular ayuda a escribir código más modular y mantenible.