Angular2 all image loaded

Question

I'm trying to figure out how should I detect if all image has been loaded in my element. My element is like this now:

<div class="flexbox" appMyMasonry>
    <div *ngFor="let new of specificNews | async}" class="box">

               <md-card class="example-card">
                   <img md-card-image src="{{new.coverImageUrl}}">
                   ....

appMyMasonry is a directive of mine: it makes an order/positioning based on how the elements should fill the available space... the important thing here is, that right now it works only if I call a method of the directory like this:

@ViewChild(MyMasonryDirective) directive = null

ngAfterViewChecked(): void {
    this.directive.sortElements();
  }

basically it works... but because of the ngAfterViewChecked() it call the function all the time.. one after an other and I hope there is a better way than just call it 10times in every second.. thanks for the help!

Answer 1

Listen to the error event of the image element:

<img [src]="someUrl" (error)="doSomething($event)">

where doSomething(event) { ... } provide your manipulation with size or what you want.

Plunker example

If you want to check in code only you can use the method explained in Checking if image does exist using javascript

@Directive({
  selector: 'img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
   }
})
class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

Directive Plunker example