Getting element height

Question

I was curious if I can get element properties form component template. So I have made simple div with class and I've made this class:

export class viewApp{    elementView: any;   viewHeight: number;   myDOM: Object;    constructor() {     this.myDOM = new BrowserDomAdapter();   }    clickMe(){     this.elementView = this.myDOM.query('div.view-main-screen');     this.viewHeight = this.myDOM.getStyle(this.elementView, 'height');   } } 

getStyle(), query() are from BrowserDomAdapter. My problem is when I try to get height it is null, but when I set some height by setStyle() and then I get it by getStyle() it returns proper value. After checking DOM and styles in browser I discovered that is because of two CSS elements. One is: .view-main-screen[_ngcontent-aer-1]{} and second one is element{}. .view-main-screen has some stylings, but element is empty. When I add styles by setStyle() it appears in element{}. Why is that? How can I get element properties by using Angular2?

Answer 1

The correct way is to use @ViewChild() decorator:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

Template:

<div class="view-main-screen" #mainScreen></div> 

Component:

import { ElementRef, ViewChild } from '@angular/core';  export class viewApp{        @ViewChild('mainScreen') elementView: ElementRef;       viewHeight: number;        constructor() {       }        clickMe(){         this.viewHeight = this.elementView.nativeElement.offsetHeight;       } } 

That should do it but obviously you need to add your Component decorator.

Edit:

For Angular 8 or later you need to provide the 2nd parameter in ViewChild

@ViewChild('mainScreen', {read: ElementRef, static:false}) elementView: ElementRef;