@ng-web-apis/resize-observer
TypeScript icon, indicating that this package has built-in type declarations

4.2.0 • Public • Published

ng-web-apis logo Resize Observer API for Angular

npm version npm bundle size codecov

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

Install

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

Usage

  1. Import ResizeObserverModule to the module where you plan to use it.
  2. 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.

Service

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 Example {
  constructor(@Inject(ResizeObserverService) entries$: ResizeObserverService) {
    entries$.subscribe((entries) => {
      // This will trigger when the component resizes
      // Don't forget to unsubscribe
      console.log(entries);
    });
  }
}

Browser support

IE / Edge
Firefox
Chrome
Safari
iOS Safari
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

Package Sidebar

Install

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

Weekly Downloads

13,491

Version

4.2.0

License

Apache-2.0

Unpacked Size

50 kB

Total Files

19

Last publish

Collaborators

  • marsibarsi
  • waterplea
  • vladimir.potekhin
  • defenderbass