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:

1npm i @ng-web-apis/common

Now install the package:

1npm i @ng-web-apis/resize-observer

Usage

1. Import WaResizeObserver
2. Use waResizeObserver directive to observe an element:

1<section>
2  <h1
3    waResizeBox="content-box"
4    (waResizeObserver)="onResize($event)"
5  >
6    I'm being observed
7  </h1>
8</section>

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 ResizeObserverService and provide token RESIZE_OPTION_BOX manually:

1@Component({
2  selector: 'my-component',
3  providers: [
4    ResizeObserverService,
5    {
6      provide: RESIZE_OPTION_BOX,
7      useValue: 'border-box',
8    },
9  ],
10})
11export class Example {
12  constructor(@Inject(ResizeObserverService) entries$: ResizeObserverService) {
13    entries$.subscribe((entries) => {
14      // This will trigger when the component resizes
15      // Don't forget to unsubscribe
16      console.log(entries);
17    });
18  }
19}

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