How to perform change detection on div resizing
You can add a directive to the div
and implement lifecycle hook ngDoCheck()
to perform your own change detection logic. You'll need to inject ElementRef
:
constructor(private _elRef:ElementRef) {}ngDoCheck() { // use ElementRef to examine the div property of interest
If the div
is inside a component template, add a local template variable
<div #myDiv ...>
Then use @ViewChild()
to get a reference to the div
and implement lifecycle hook ngDoCheck()
or ngAfterViewChecked()
to perform your own change detection logic.
@ViewChild('myDiv') theDiv:ElementRef;ngAfterViewChecked() { // use this.theDiv to examine the div property of interest
Note that ngDoCheck() and ngAfterViewChecked() will be called every time change detection runs. See also the dev guide Lifecycle Hooks.
I had the same problem so I used the lightweight library called Angular-Resize-Event
https://www.npmjs.com/package/angular-resize-event
<div (resized)="onResized($event)"></div>
After installing it just add this output event to any div which you want to check for size changes.
I have tried the correct answer but the refresh rate wasn't very accurate, So I looked for another solution.
Here it is
// Directive@Directive({ selector: '[resize-detector]',})public constructor(public element: ElementRef<HTMLElement>) {}public ngOnInit(): void {// Call detectResize as whe the element inits the windows resize event most likely won't trigger this.detectResize();}// if you need the windowDimensions add ", [$event]" to @HostListener and pass event to detectResize(event)@HostListener('window:resize') public detectResize(): void { console.log(element.nativeElement.offsetWidth); console.log(element.nativeElement.offsetHeight); // Do you magic here ...}
Then you can use it in any element like:
<app-component resize-detector></app-component>