A library for declarative use of Resize Observer API with Angular
npm install @ng-web-apis/resize-observer


This is a library for declarative use of
Resize Observer API with Angular.
If you do not have @ng-web-apis/common:
``bash`
npm i @ng-web-apis/common
Now install the package:
`bash`
npm i @ng-web-apis/resize-observer
1. Import WaResizeObserverwaResizeObserver
2. Use directive to observe an element:
`html`
waResizeBox="content-box"
(waResizeObserver)="onResize($event)"
>
I'm being observed
Use waResizeBox to configure
ResizeObserver options
NOTE: Keep in mind these are used one time in constructor so you cannot use binding, only strings.
Alternatively you can use Observable-based WaResizeObserverService and provide token WA_RESIZE_OPTION_BOX
manually:
`ts``
@Component({
selector: 'my-component',
providers: [
WaResizeObserverService,
{
provide: WA_RESIZE_OPTION_BOX,
useValue: 'border-box',
},
],
})
export class Example {
constructor(@Inject(WaResizeObserverService) entries$: WaResizeObserverService) {
entries$.subscribe((entries) => {
// This will trigger when the component resizes
// Don't forget to unsubscribe
console.log(entries);
});
}
}
| 
| 
| 
| 
| 
|
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 79+ | 69+ | 64+ | 13.1+ | 13.4+ |
> You can use polyfill to support older browsers
You can try online demo here
Other Web APIs for Angular by
@ng-web-apis