CODEWITHSUNDEEP
propertiestypescriptangular
Arth
Arth

Reputation: 545

Getting element height

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?

Upvotes: 33

Views: 128696

Answers (4)

Foram Sojitra
Foram Sojitra

Reputation: 408

  <div #getElementHeight>
      Height
  </div>

Height of element is {{ getElementHeight.offsetHeight }}

Upvotes: 2

Jon Catmull
Jon Catmull

Reputation: 12752

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;

Upvotes: 77

gonnavis
gonnavis

Reputation: 356

<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>

itemClick(dom){
  var height=dom.clientHeight;
  // ...
}

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657158

update2

constructor(private elementRef:ElementRef) {}

someMethod() {
   console.log(this.elementRef.nativeElement.offsetHeight);
}

Accessing nativeElement directly is discouraged but current Angular doesn't provide other ways as far as I know.

update

https://github.com/angular/angular/pull/8452#issuecomment-220460761

mhevery commented 12 days ago We have decided to remove Ruler service, and so it is not part of the public API.

original

As far as I know the Ruler class should provide that functionality https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts if this isn't enought you probably need to access elementRef.nativeElement and use direct DOM access and functions provided by the elements.

new Ruler(DOM).measure(this.elRef).then((rect: any) => {
});

Rules service is safe in WebWorker. See also the comments on https://github.com/angular/angular/issues/6515#issuecomment-173353649

Upvotes: 18

Related Questions