How to get Image width / height if the image is too big in Angular?

Question

When I try to log image width in ngAfterViewInit method

I get width = 0 Since the image is too Big

How can I properly see the image width without using a setTimeout()

Here is the code example

PS. I tried the solution in this post but was unsuccessful

This is what i see

@LukasS i added a screen shot, maybe your internet is very fast thats why you see it properly — dota2pro, Jul 25 '19 at 14:33
@AndrewAllen maybe on second load it is cached i have cached turned off — dota2pro, Jul 25 '19 at 14:34
I think this is way to go...https://stackoverflow.com/a/39257902/4711754 — Andrew Allen, Jul 25 '19 at 14:38

Andrew Allen · Accepted Answer · 2019-07-25T14:52:47.420

Per answer here Detect when image has loaded in img tag hook into load event

import { Component, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
  <img #hdImage
  src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg"
  (load)="dosomething(hdImage.width)">
  `,
  styles: [``]
})
export class HelloComponent {
  @ViewChild('hdImage', { static: false }) HdImage: ElementRef;
  img: HTMLImageElement;

  dosomething(width: number) {
    console.log('[dosomething] width', width);
  }

}

@AlexandrMihalciuc answer is better as it is better to pass the width directly so I've stolen it to improve this now accepted answer.

score 2 · Answer 2 · answered Jul 25 '19 at 14:47

2

Subscrive to load event of the img tag:

 <img #hdImage      src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg" (load)="loaded(hdImage.width)">

answered Jul 25 '19 at 14:47

Alexandr Mihalciuc

2,537
15
12

Can you please show me how ? https://stackblitz.com/edit/angular-xukke1?file=src/app/hello.component.ts – dota2pro Jul 25 '19 at 15:20
I mean can I `subscribe` (RxJs) to this method ? – dota2pro Jul 25 '19 at 15:29
1

(load)="loaded(hdImage.width)" calls the component function, and in this function you are free to do what you need, so you can add next value to a earlier created subject. – Alexandr Mihalciuc Jul 25 '19 at 15:50

How to get Image width / height if the image is too big in Angular?

2 Answers2