@ng-web-apis/resize-observer
v4.11.1
Published
A library for declarative use of Resize Observer API with Angular
Downloads
65,439
Readme
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:
npm i @ng-web-apis/common
Now install the package:
npm i @ng-web-apis/resize-observer
Usage
- Import
ResizeObserverModule
to the module where you plan to use it. - 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
| | | | | | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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