Default image on error - Angular directive

default-image-on-error.directive.ts

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

@Directive({
  selector: '[defaultImageOnError]'
})
export class DefaultImageOnErrorDirective {
  @Input() defaultImageOnError: string;

  @HostListener('error', ['$event'])
  handleError(event: ErrorEvent): void {
    (event.target as HTMLImageElement).src = this.defaultImageOnError;
  }
}

@NgModule({
  exports: [DefaultImageOnErrorDirective],
  declarations: [DefaultImageOnErrorDirective],
})
export class DefaultImageOnErrorDirectiveModule {}

Usage:

export class TestComponent {
  imageUrl = 'http://helloworld.com'; // this will throw error when loaded as image
}

 <img
  [src]="imageUrl"
  defaultImageOnError="assets/error.png"
  alt="Hello world"
  loading="lazy" />