Angular 17.x library to monitor changes to elements. Uses ResizeObserver to do the work.
If you would like to simply know when elements are visible, check out ngx-visibility.
If you want to be notified when DOM elements change properties, ngx-mutation-observer would be a good pick.
There's a live demo over at CodeSandbox.io.
Install like other Angular libraries. First run a command to download the module.
npm install ngx-resize-observer
Next, add the module to your project.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
// Import the module
import { NgxResizeObserverModule } from 'ngx-resize-observer';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent, ItemComponent],
// Include the module.
imports: [BrowserModule, FormsModule, NgxResizeObserverModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Finally, you leverage the service directly or use some directives for common uses.
Emits ResizeObserverEntry when a resize is detected for that element.
<div (onResize)="handleResize($event)"></div>
Only one property is configurable, which is the box model. When not specified, it defaults to "content-box". To change this, use the resizeBoxModel directive. The only allowed values are "content-box" and "border-box".
<div (onResize)="handleResize($event)" resizeBoxModel="border-box"></div>
This project is licensed under an MIT license.