title: Access the offsetHeight of an element in angular2 component
body: <p>I am wondering if there is anyway to access the attributes of a DOM element in an Angular2 component, <strong>without</strong> using nativeElement to maintain DOM independence. </p>
  
  <p>I currently use renderer to <strong>set</strong> DOM attributes. However, I'm unsure of the correct solution to <strong>retrieve</strong> the values of DOM element attributes without using accessing the DOM directly with nativeElement. <a href="https://github.com/angular/angular/pull/8452#issuecomment-220460761" rel="nofollow noreferrer">This link advises to do this, however was posted in June</a> Have we come up with something better since then?</p>
  
  <p>My current implementation is as follows: </p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
  
  @Component({
    selector: 'div',
    templateUrl: './div.component.html',
    styleUrls: ['./div.component.css']
  })
  
  export class DivComponent{ 
  
      @ViewChild('element') ele: ElementRef;
  
          overlayMargin: string;
  
      constructor(private el:ElementRef) {}
  
      @HostListener('window:resize', ['$event'])
      onResize(event) {
          this.overlayMargin = this.ele.nativeElement.offsetHeight + 'px';
      }
  
  }
  </code></pre>
  
  <p>I set the margin whenever the window gets resized. <strong>The main portion of code to focus on is</strong> <code>this.ele.nativeElement.offsetHeight</code></p>
  
  <p>To my understanding grabbing the attribute value in this manner makes my component DOM dependent, and the negative implication is not being able to use web workers in the future. </p>
  
  <p>I noticed solutions using things like <a href="https://stackoverflow.com/questions/34919738/getting-element-height-angular-2">Ruler</a> however it was <a href="https://github.com/angular/angular/pull/8452#issuecomment-220460761" rel="nofollow noreferrer">removed</a> and in that last link, they advise to "just access the DOM directly for now" However, that was in June 2016, it's now 2017, I've looked around, and have not found any apparent solutions. Has a new API been made to address this? I would like to avoid accessing the DOM directly if at all possible to maintain component independence.</p>
  
  <h2>So my question is: Is there a better way of doing this? Or is <code>.nativeElement</code> and <code>ViewChild</code> the best method for now? (As of 1/18/2017)</h2>