🩻Directivas

Una directiva en Angular es una clase que puede modificar el comportamiento o el aspecto de los elementos en el DOM. Las directivas permiten añadir funcionalidades adicionales a los elementos HTML.

🛠️Tipos de Directivas en Angular

1. Directivas de Atributo (Attribute Directives): Modifican el comportamiento o el estilo de un elemento. Ejemplo: ngClass, ngStyle.

2. Directivas Estructurales (Structural Directives): Cambian la estructura del DOM, añadiendo o eliminando elementos. Ejemplo: ngIf, ngFor.

3. Componentes: Técnicamente, los componentes son un tipo especial de directiva con una plantilla asociada.

📌 Crear una Directiva en Angular

Para crear una directiva, puedes usar el CLI de Angular:

ng generate directive nombre-directive

🏗️ Definición de la Directiva

@Directive({
  selector: '[appCheckBrokenImage]'
})
export class CheckBrokenImageDirective {
  @Input() defaultImage: string;

  constructor(private el: ElementRef) {}

  @HostListener('error')
  onError() {
    const element = this.el.nativeElement;
    if (this.defaultImage) {
      element.src = this.defaultImage;
    } else {
      element.src = 'assets/default-image.png'; // Ruta a una imagen por defecto
    }
  }
}

@HostListener es un decorador en Angular que permite a las directivas y componentes escuchar eventos del DOM en el elemento al que están asociados.

📌 Importancia de @HostListener

• Escuchar Eventos del DOM: Facilita la captura de eventos como clics, teclas presionadas, movimientos del mouse, etc.

• Responde a Eventos Específicos: Permite ejecutar lógica específica en respuesta a eventos del usuario.

🎯 ¿Para Qué se Usan las Directivas en Angular?

• Modificar Estilos: Cambiar estilos de un elemento dinámicamente.

  • Ejemplo: ngStyle, ngClass.

• Gestionar Eventos: Escuchar eventos del DOM y actuar en consecuencia.

  • Ejemplo: @HostListener.

• Cambiar Estructura del DOM: Añadir o eliminar elementos del DOM.

  • Ejemplo: ngIf, ngFor.

• Comportamientos Personalizados: Añadir comportamientos específicos a elementos.

  • Ejemplo: Validaciones personalizadas en formularios.

📚 Usar una Directiva en un Componente

Una vez creada la directiva, se usa en un componente de la siguiente manera:

<img [src]="imagePath" appCheckBrokenImage [defaultImage]="'assets/default-image.png'" alt="Imagen">