CODEWITHSUNDEEP
javascriptangular
Nemanja Grabovac
Nemanja Grabovac

Reputation: 878

Check for image dimensions - Angular 5

I am trying to find out the logo dimensions, since different clients can upload different logos. The HTML is like this: 

<img [src]="layoutResponseModel?.clientLogo" alt="">

How can I get width and height of this image in Angular 5? Found a few JS examples but couldn't make it work

Upvotes: 5

Views: 8164

Answers (1)

user4676340
user4676340

Reputation:

Give your image a template variable a load hook : 

<img [src]="layoutResponseModel?.clientLogo" alt="" #logo (load)="onLoad()">

Reference it in your component : 

@ViewChild('logo') logo: ElementRef;

Write your load hook : 

onLoad() {
  console.log((this.logo.nativeElement as HTMLImageElement).width);
}

This will give you the width of the displayed image.

Working stackblitz

Upvotes: 12

Related Questions