Las directivas personalizadas en Angular permiten extender la funcionalidad de los elementos HTML de una manera reutilizable. A diferencia de las directivas incorporadas, que vienen predefinidas en Angular, las directivas personalizadas son creadas por el desarrollador para satisfacer necesidades específicas de la aplicación.

Una directiva personalizada es una clase de Angular que puede modificar el comportamiento de un elemento, componente o atributo en el DOM. Las directivas personalizadas se pueden clasificar en tres tipos:

1. Directivas de Atributo: Modifican el comportamiento o el aspecto de un elemento.
2. Directivas Estructurales: Cambian la estructura del DOM (por ejemplo, *ngIf, *ngFor).
3. Componentes: Son directivas con una plantilla asociada.

En este tema, nos enfocaremos en las directivas de atributo personalizadas.

Angular CLI facilita la creación de directivas personalizadas. Utiliza el siguiente comando para generar una directiva:

Este comando crea dos archivos: highlight.directive.ts y highlight.directive.spec.ts (para pruebas).

Vamos a implementar una directiva simple que resalta el texto de un elemento cuando el usuario pasa el ratón sobre él.

• @Directive: Decorador que marca la clase como una directiva de Angular.
• selector: Define el nombre de la directiva. En este caso, appHighlight.
• ElementRef: Servicio que proporciona una referencia al elemento DOM al que se aplica la directiva.
• @HostListener: Decorador que escucha eventos del host (el elemento al que se aplica la directiva).
• @Input: Decorador que permite que la directiva reciba valores de entrada.

Para usar la directiva, simplemente agrégala a un elemento en la plantilla de un componente:

Ejercicio 1: Crear una Directiva de Atributo Personalizada

Crea una directiva llamada appTextColor que cambie el color del texto de un elemento cuando el usuario haga clic en él.

Solución:

1. Genera la directiva:

   ng generate directive textColor
   

2. Implementa la directiva:

   import { Directive, ElementRef, HostListener, Input } from '@angular/core';
   
   @Directive({
     selector: '[appTextColor]'
   })
   export class TextColorDirective {
     @Input('appTextColor') textColor: string;
   
     constructor(private el: ElementRef) {}
   
     @HostListener('click') onClick() {
       this.changeTextColor(this.textColor || 'blue');
     }
   
     private changeTextColor(color: string) {
       this.el.nativeElement.style.color = color;
     }
   }
   

3. Usa la directiva en un componente:

   <p appTextColor="red">Haz clic en este texto para cambiar su color.</p>
   

• Olvidar importar la directiva en el módulo: Asegúrate de importar y declarar la directiva en el módulo correspondiente (app.module.ts o un módulo específico).

  import { TextColorDirective } from './text-color.directive';
  
  @NgModule({
    declarations: [
      TextColorDirective,
      // otros componentes y directivas
    ],
    // ...
  })
  export class AppModule { }
  

• No usar el decorador @Input correctamente: Asegúrate de que los nombres de los inputs coincidan con los nombres utilizados en la plantilla.

Las directivas personalizadas son una herramienta poderosa en Angular que permite extender la funcionalidad de los elementos HTML de manera reutilizable. En este tema, aprendimos a crear una directiva de atributo personalizada, cómo implementarla y cómo usarla en un componente. También discutimos algunos errores comunes y consejos para evitarlos. En el próximo módulo, exploraremos los servicios y la inyección de dependencias en Angular.