Crea una directiva personalizada en Angular 👈

Aprende qué es una directiva en Angular y aprende a crear una directiva personalizada

Lo que aprenderás será a que aparezca una imagen por defecto en lugar del típico error de que no se encuentra una imagen para conseguir una mejor experiencia de usuario.

Verás esto:

En lugar del típico error de imagen no se encuentra.

Empezemos por el principio.

¿Qué es una directiva en Angular?

Las directivas pueden cambiar la apariencia o el comportamiento del DOM.

Ejemplos de directivas son el ngIf, ngFor... seguro que te suenan 😁

Hay distintos tipos de directivas:

• Directivas de atributo; alteran el comportamiento o la apariencia de un elemento del DOM y son usados como atributos. ngModel, ngClass y ngStyle
• Directivas estructurales; alteran la estructura del DOM, agregando, modificando y eliminando elementos. *ngIf, *ngFor, ngSwitch, ngPlural, ngTemplate y ngComponentOutlet
• Directivas de componente; son directivas con un Template o su propio código HTML.

Creando nuestra directiva personalizada

Para generar nuestra directiva utilizaremos el siguiente comando del Angular CLI:

ng generate directive [nombre de la directiva]

O también podemos usar su forma abreviada:

ng g d [nombre de la directiva]

Después de ejecutar el comando anterior se nos crearán dos archivos, el de test y el ts.

Programando nuestra directiva

1. Añadiremos el decorador @HostListener(). Este decorador escuchará eventos del DOM, en concreto nosotros queremos escuhar los errores, para cuando aparezca el error de que no existe la imagen podamos ejecutar un método que programaremos.
2. En el constructor inyectaremos ElementRef

3. Crearemos el metódo cargaImagenNoDisponible(); lo que hará será cargar en la propiedad src del ElementRef la ruta de nuestra imagen que queremos que se muestre cuando haya un error de imagen no encontrada.

     cargaImagenNoDisponible(): void {
       this.elementImg.nativeElement.src='la ruta de tu imagen por defecto si hay un error';
     }
     

4. Ya estaría la directiva terminada, por último, para utilizar la directiva sólo debes de poner el selector de dicha directiva en el elemento img del HTML donde desees aplicarla.

Código completo de la directiva

import { Directive, ElementRef, HostListener } from '@angular/core';

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

export class ImagenNoDisponibleDirective {

  constructor(private elementImg:ElementRef) { }

  @HostListener('error')
  
  cargaImagenNoDisponible(): void {
    this.elementImg.nativeElement.src='la ruta de tu imagen por defecto si hay un error';
  }

}
  

Añadiendo la directiva al elemento HTML img

Por último, añade la directiva a tu etiqueta img

<img appImagenNoDisponible src="ruta_de_tu_imagen"/>
        

Hasta luego 🖖