Angular - custom directive after image src loaded

Question

i've got a problem.

I have to get width and height of an image after loaded with the directive [src].

I got this html that get he url from a parent object with @input:

<img fitImageSize [src]="content.openGraphImage.contentUrl"/>

and here my directive to get the dimensions:

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

@Directive({
  selector: '[fitImageSize]'
})
export class FitImageSizeDirective implements AfterContentInit {

  el: ElementRef
  private imgWidth: any;
  private imgHeight: any;

  constructor(_el:ElementRef) {
    this.el = _el;
  }

  ngAfterContentInit() {
    this.imgWidth = this.el.nativeElement.offsetWidth;
    this.imgHeight = this.el.nativeElement.offsetHeight;    
    console.log(this.imgWidth);
  }
}

The console.log always print "0". I don't know how to launch the directive process after the image is loaded. Can someone help me please? I searched before asking but i haven't found any answers yet.

Thanks! :-)

Chellappan வ · Accepted Answer · 2018-07-09 16:03:14Z

1

You need to Use different lifecycle hook to get the image width. Which called after the components view has been full initialized.

@Directive({
  selector: '[fitImageSize]'
})
export class FitImageSizeDirective implements AfterViewInit {

  el: ElementRef
  private imgWidth: any;
  private imgHeight: any;

  constructor(_el:ElementRef) {
    this.el = _el;
  }

  ngAfterViewInit() {
    this.imgWidth = this.el.nativeElement.offsetWidth;
    this.imgHeight = this.el.nativeElement.offsetHeight;    
    console.log(this.imgWidth);
  }
}

answered Jul 9, 2018 at 16:03

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Marione Over a year ago

In this way not in every case i got the image dimension before the ngAfterViewInit. From a list of 30 img elements almost the half get the size

Chellappan வ Over a year ago

are you looping the image list?

Marione Over a year ago

Correct. The parent component creates a list of components hosting my img

Marione Over a year ago

Marione Over a year ago

in app-daily-update-box I got the images that I need to get the size

|

Collectives™ on Stack Overflow

Angular - custom directive after image src loaded

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related