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