!ng-web-apis logo Resize Observer API for Angular


This is a library for declarative use of
Resize Observer API with Angular.

Install

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
`

Usage

1. Import WaResizeObserver
2. Use waResizeObserver 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.

Service

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

Browser support

|
|
|
|
|
|
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 79+ | 69+ | 64+ | 13.1+ | 13.4+ |

> You can use polyfill to support older browsers

Demo

You can try online demo here

See also

Other Web APIs for Angular by
@ng-web-apis