angulartypescriptviewchildangular-lifecycle-hooks

Is there a way to know if an image has been loaded in the dom on Angular

I'm actually working on Angular and I want to know if there is a way to know if an image has been loaded correctly in the dom. I trie using this.image.nativeElement.width but the width is sent before the image loading.

HTML

<img #image [src]="imagePath">

TS

@ViewChild('image', {static: true})
  image: ElementRef<HTMLImageElement>;
Solution

  • You can do it in two ways:

    Using AfterViewInit and access the element

    @ViewChild('image')
  public img: ElementRef;

  ngAfterViewInit() {
    const image: HTMLImageElement = this.img.nativeElement;

    image.onload = () => {
      console.log('image loaded');
    };
  }

    Using (load) event

    <img #image [src]="imagePath" (load)="functionAfterLoad()">

    https://stackblitz.com/edit/rotate-image-bdqndf?file=app/app.component.ts