Angular - What other issues can cause offsetHeight to remain "0"?

Question

I need to know a rendered element's height. I don't care if the element reports it or if the parent detects the height.

I've been researching this issue and I the number one root cause is that the :host element must have its display:block set and I've done that. (Did I do it at the right level?)

this.nativeElement dumps great info to the console.log but when I try to programmatically access the value it comes up "0".

Files:

img-fader.component.html

<img [src]='imgSrc' class="item carousel-item" style="width: 100%; display: block;"/>

img-fader.component.css

:host {
    display: block;
}

img.carousel-item {
    position: absolute;
    left: 0;
}

img-fader.component.ts (Significant Portions)

export class ImgFaderComponent implements AfterViewInit {
  @ContentChildren(ImgFaderComponent, {read: ElementRef}) imgList: QueryList<ElementRef>;

  constructor() {}

  ngAfterViewInit() {
    this.imgList.forEach(img => console.log('Img: ', img.nativeElement.children[0].offsetHeight));
  }
}

There is load event for img tag. – yurzui Jul 02 '17 at 16:33 — yurzui, Jul 02 '17 at 16:33
An image has no dimensions until it has loaded – charlietfl Jul 02 '17 at 17:00 — charlietfl, Jul 02 '17 at 17:00
Ok, so how do I hook into that event? – Lorin S. Jul 02 '17 at 18:14 — Lorin S., Jul 02 '17 at 18:14

score 0 · Answer 1 · edited Aug 16 '20 at 00:42

0

In case anyone is still struggling with similar issues with image offsetHeight, I figured out that if you wrap the command to get offsetHeight withing a setTimeout function, you then get the image height (and width I suppose) correctly.

This happens because asynchronous commands run to the next cycle, so the image has loaded then.

edited Aug 16 '20 at 00:42

Dharman

30,962
25
85
135

answered Aug 16 '20 at 00:37

Ilias-Stylianos Karabasis

1
1

Angular - What other issues can cause offsetHeight to remain "0"?

1 Answers1