Package Exports

@ng-web-apis/resize-observer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ng-web-apis/resize-observer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Resize Observer API for Angular

Part of Web APIs 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

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 MyComponent {
    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

Open-source

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.

@ng-web-apis/resize-observer