Skip to content
This repository has been archived by the owner on May 29, 2023. It is now read-only.

ng-web-apis/resize-observer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2d2780a · May 29, 2023

History

36 Commits
Jun 5, 2021
Jul 14, 2022
Jul 15, 2022
Jun 5, 2021
Apr 6, 2020
Jul 14, 2022
Apr 6, 2020
Jul 15, 2022
Apr 6, 2020
Apr 6, 2020
Apr 6, 2020
May 29, 2023
Jul 14, 2022
Jul 14, 2022
Jul 15, 2022
Jul 15, 2022
Jul 14, 2022
Jul 14, 2022
Apr 6, 2020

Repository files navigation



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



ng-web-apis logo Resize Observer API for Angular

Part of > Web APIs for Angular

npm version npm bundle size .github/workflows/ci.yml Coveralls github angular-open-source-starter

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

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

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.