title: How to observe when a element size changes in Angular 2
body: <p>What is the best way to do some action when the div in the template changes size? The size of the div changes when the window is resized. With Rxjs Observable/subscribe or are the some other way?</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div #eMainFrame class="main-frame"&gt;
     ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>@Component({
     selector: 'app-box',
     templateUrl: './box.component.html',
     styleUrls: ['./box.component.css']
  })
  export class BoxComponent implements OnInit {
     @ViewChild('eMainFrame') eMainFrame : ElementRef;
  
     constructor(){}
  
     ngOnInit(){
       // This shows the elements current size
       console.log(this.eMainFrame.nativeElement.offsetWidth);
     }
  }
  </code></pre>
  
  <p><strong>Updated component</strong> (this example detects when the window size is changed) </p>
  
  <pre><code>constructor(ngZone: NgZone) { 
  
     window.onresize = (e) =&gt; {
       ngZone.run(() =&gt; {
         clearTimeout(this.timerWindowResize);
         this.timerWindowResize = setTimeout(this._calculateDivSize, 100);
       });
     }
  }
  
  _calculateDivSize(){
     console.log(this.eMainFrame.nativeElement.offsetWidth); 
  }
  </code></pre>
  
  <p>but this gives me an error: </p>
  
  <blockquote>
    <p>EXCEPTION: Cannot read property 'nativeElement' of undefined</p>
  </blockquote>