Skip to content

Ngx observers is library to allow developer use Resize, Mutation and Intersection observer api like normal output events on some element.

License

Notifications You must be signed in to change notification settings

Raiper34/ngx-observers

Repository files navigation

Ngx observers

npm version CircleCI GitHub issues npm bundle size NPM docs

Ngx observers is library to allow developer use Resize, Mutation and Intersection observer api like normal output events on some element.

Version compatibility

Angular version Ngx observers version
12, 13 0.0.0 - 1.x.x
14 2.x.x
15 3.x.x

Instalation

npm install ngx-observers --save

then add NgxSimpleTextEditorModule into module imports

import {NgxObserversModule} from "ngx-observers";

@NgModule({
// ...
  imports: [
    // ...
    NgxObserversModule,
    // ...
  ],
// ...
})

Usage

<div (obsResize)="resize($event)" [obsOptions]="{box: 'content-box'}" #elem="directive">...</div>
<div (obsMutation)="mutate($event)" [obsOptions]="{subtree: false}" #elem="directive">...</div>
  • Intersection directive - Allow observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport
<div (obsIntersection)="intersect($event)" [obsOptions]="{threshold: 0.5}" #elem="directive">...</div>

You can access directive original observer object (e.g. this.obsResize.observer) using template variables (#elem="directive"):

@ViewChild('elem') obsResize: ResizeDirective | undefined;
@ViewChild('elem') obsMutation: MutationDirective | undefined;
@ViewChild('elem') obsIntersection: IntersectionDirective | undefined;

Documentation

See online

License

MIT