Part of Web APIs for Angular

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

If you do not have @ng-web-apis/common:

npm i @ng-web-apis/common 

Now install the package:

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

1. Use waResizeObserver directive to observe an element:

<section> <h1 waResizeBox="content-box" (waResizeObserver)="onResize($event)"> I'm being observed </h1> </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.

Alternatively you can use Observable-based ResizeObserverService and provide token RESIZE_OPTION_BOX manually:

@Component({ selector: 'my-component', providers: [ ResizeObserverService, { provide: RESIZE_OPTION_BOX, useValue: 'border-box', }, ], }) export class MyComponent { constructor(@Inject(ResizeObserverService) entries$: ResizeObserverService) { 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

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.