How to get DOM element height?

Question

<div style="width:100%;height:100%;position:relative;background-color:white" id ="OuterSvg"> </div>

onPageLoaded(){
     console.log(document.getElementById("OuterSvg").offsetHeight); //get 0.
}   

ngAfterViewInit(){
     console.log(document.getElementById("OuterSvg").offsetHeight); //get 0.
}

I have also tried onPageLoaded() and ngAfterViewInit(), but they do not work.

How to get the element's height/width after it is rendered?

Could be related to http://stackoverflow.com/a/294273/217408 - see the first comment or try `getBoundingClientRect().height` — Günter Zöchbauer, Jan 05 '16 at 15:40
@GünterZöchbauer getBoundingClientRect().height also returns 0. So as the comment, i should use settimeout method? but is angulars have any functions that can get the height after the element's dom ready? — Kim Wong, Jan 05 '16 at 15:52

score 17 · Accepted Answer · answered Jan 05 '16 at 22:42

What you want is the height of an element after Angular has processed the event lifecycles, compiled the html and injected it on the page, and the browser finished rendering that html.

You need the height only when its stable, not before. The problem is that all that is done after Angular relinquishes the Javascript VM turn, and there is no "browser finished rendering" or "layout calculated" event.

You need to give the browser a chance to calculate the height and apply it. For example call setTimeout. This will give the browser the chance to calculate the height.

Probably an interval of zero ms would work. This is because calls to offsetHeight trigger a layout recalculation if needed (see here).

This is a general problem and is not framework specific, its just the way browsers work. In general its better to try to avoid as much as possible this kind of logic (wait until height is stable to do X), it tends to create hard to fix issues.

This is freakin awesome! You are right with "in general its better to try to avoid as much as possible this kind of logic" but the one time you cant avoid it (e.g. for performance reasons) it saves the day. Probably people think that is necessary too fast but as I said if it is the one out of a hundred cases it will make you drop your jaw and be happy :) — Martin Eckleben, Mar 19 '19 at 14:49

Poul Kruijt · Answer 2 · 2016-08-08T07:51:01.020

6

Try the function ngAfterViewInit

ngAfterViewInit(){
     console.log(document.getElementById("OuterSvg").offsetHeight);
}

And is your div HTML like it is? Otherwise you might consider removing the space after id:

<div style="width:100%;height:100%;position:relative;background-color:white" id="OuterSvg">

edited Aug 08 '16 at 07:51

answered Jan 05 '16 at 15:42

Poul Kruijt

69,713
12
145
149

Well, if the container of the div has no fixed height. Height 100% will not work – Poul Kruijt Jan 05 '16 at 16:44

score 3 · Answer 3 · answered Mar 14 '19 at 11:43

The event AfterViewChecked with ngIf worked for me. The event AfterViewChecked event is triggered every time the DOM is updated. In addition, it is possible to send height to a child component.

As Angular documentation says:

Respond after Angular checks the component's views and child views / the view that a directive is in.

Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked()

So code looks like this:

export class YourComponent implements AfterViewChecked {

    @ViewChild('fooWrapper') sidebarElementRef: ElementRef;

    ngAfterViewChecked() {
        this.divHeight = this.sidebarElementRef.nativeElement.offsetHeight;
    }
}

HTML:

<div #fooWrapper>        
    <fooComponent 
        *ngIf="divHeight > 0"
        [Height]="divHeight">
    </fooComponent>        
</div>

score 2 · Answer 4 · answered Aug 06 '16 at 21:19

This seems to work

In the view

<results-control></results-control>

In the component

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

@Component({
    selector: 'results-control',
    template: '<div #resultsControlContainer> ... </div>'
})
export class ResultsControl {

    @ViewChild('resultsControlContainer') resultsControlContainerEl: ElementRef;

    ngAfterViewInit() {
        var height = this.resultsControlContainerEl.nativeElement.offsetHeight;
        console.log(height);
    } 
}

score 0 · Answer 5 · answered Aug 07 '16 at 14:20

Try ionViewDidEnter

View Lifecycle Hooks Fortunately, Ionic packages a set of view lifecycle hooks into the NavController – part of the Ionic module. They follow four patterns of event handlers:

ionViewLoaded works the same way as ngOnInit, fires once when the view is initially loaded into the DOM

ionViewWillEnter and ionViewDidEnter are hooks that are available before and after the page in question becomes active

ionViewWillLeave and ionViewDidLeave are hooks that are available before and after the page leaves the viewport

ionViewWillUnload and ionViewDidUnload are hooks that are available before and after the page is removed from the DOM

https://webcake.co/page-lifecycle-hooks-in-ionic-2/

How to get DOM element height?

5 Answers5