Repository files navigation

Attention! This repository is archived and the library has been moved totinkoff/ng-web-apis monorepository

Part of >Web APIs for Angular

This is a library for declarative use ofResize 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. ImportResizeObserverModule to the module where you plan to use it.
2. UsewaResizeObserver directive to observe an element:

<section><h1waResizeBox="content-box"(waResizeObserver)="onResize($event)">I'm being observed</h1></section>

UsewaResizeBox to configureResizeObserver options

NOTE: Keep in mind these are used one time in constructor so you cannot use binding, only strings.

Alternatively you can useObservable-basedResizeObserverService and provide tokenRESIZE_OPTION_BOX manually:

@Component({selector:'my-component',providers:[ResizeObserverService,{provide:RESIZE_OPTION_BOX,useValue:'border-box',},],})exportclassMyComponent{constructor(@Inject(ResizeObserverService)entries$:ResizeObserverService){entries$.subscribe(entries=>{// This will trigger when the component resizes// Don't forget to unsubscribeconsole.log(entries);});}}

79+	69+	64+	13.1+	13.4+

You can usepolyfill to support older browsers

You cantry online demo here

OtherWeb APIs for Angular by@ng-web-apis

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