Miss any of our Open RFC calls?Watch the recordings here! »

ng-resize-observer

0.0.2 • Public • Published

Angular Resize Observer

Installation

npm install ng-resize-observer

Usage

import {
  NgResizeObserver,
  ngResizeObserverProviders
} from "ng-resize-observer";
 
@Component({
  ...
  // 1. Add providers
  providers[...ngResizeObserverProviders]
})
export class AppComponent {
  // 2. Inject resize$
  constructor(private resize$: NgResizeObserver) {}
}

Example

import { Component } from "@angular/core";
import {
  NgResizeObserver,
  ngResizeObserverProviders
} from "ng-resize-observer";
import { map } from "rxjs/operators";
 
@Component({
  selector: "app-root",
  template: "width is {{ width$ | async }} px",
  styles: [
    `
      :host {
        display: block;
        border: 3px solid green;
      }
    `
  ],
  providers: [...ngResizeObserverProviders]
})
export class AppComponent {
  width$ = this.resize$.pipe(map(entry => entry.contentRect.width));
 
  constructor(private resize$: NgResizeObserver) {}
}

Ponyfill

The ponyfill https://github.com/juggle/resize-observer is not bundled by default.

To include the bundle, use either

providers[...ngResizeObserverProvidersWithPonyfill]

on every component. Or import it once in a module:

@NgModule({
    imports: [NgResizeObserverPonyfillModule]
})

Warning

ResizeObserver is still a draft and is not yet finalised and is subject to change.

Keywords

none

Install

npm i ng-resize-observer

DownloadsWeekly Downloads

84

Version

0.0.2

License

none

Unpacked Size

130 kB

Total Files

27

Last publish

Collaborators

  • avatar