How to get Dom height in angular2?

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 try onPageLoaded () and ngAfterViewInit (), but it also does not work ... SO, how to get the height / width of an element after displaying the dom height?

Answer 1

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

You only need height when it is stable, not before. The problem is that everything that is done after Angular refuses to rotate the Javascript virtual machine, and there is no event "processed by processing completed" or "layout calculation".

You need to give the browser the ability to calculate the height and apply it. For example, calling setTimeout . This will give the browser the ability to calculate the height.

An interval of 0 ms will probably work. This is because calls to offsetHeight trigger a recalculation of the layout (see here ).

This is a common problem and is not platform specific; its just the way browsers work. In general, it is better to try to avoid as much of this logic as possible (wait until the height becomes stable to make X), it usually creates problems for correction.

Answer 2

Try the ngAfterViewInit function

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

And your HTML div as it is? Otherwise, you can remove the space after id :

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

Answer 3

It seems to work

In view

 <results-control></results-control> 

In 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); } } 

Answer 4

Try ionViewDidEnter

Viewing Lifecycle Bindings Fortunately, Ionic offers a set of views of lifecycle hooks in NavController - part of the Ionic module. They follow four event handler patterns:

ionViewLoaded works just like 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 - available interceptors before and after deleting a page from the DOM

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