How to observe when a element size changes in Angular 2

Question

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?

Template:

<div #eMainFrame class="main-frame">
   ...
</div>

Component:

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

Updated component (this example detects when the window size is changed)

constructor(ngZone: NgZone) { 

   window.onresize = (e) => {
     ngZone.run(() => {
       clearTimeout(this.timerWindowResize);
       this.timerWindowResize = setTimeout(this._calculateDivSize, 100);
     });
   }
}

_calculateDivSize(){
   console.log(this.eMainFrame.nativeElement.offsetWidth); 
}

but this gives me an error:

EXCEPTION: Cannot read property 'nativeElement' of undefined

Answer 1

The browser doesn't provide anything, therefore you need to poll the value

ngDoCheck() is called when Angular runs change detection. I think this is a good place to do the check:

ngDoCheck() {
  console.log(this.eMainFrame.nativeElement.offsetWidth);
}

If you only need to check once after component creation, use

ngAfterContentInit(){
  // This shows the elements current size
  console.log(this.eMainFrame.nativeElement.offsetWidth);
}