Ngx observers

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

• ResizeDirective - Allow observe resize event of given object

<div (obsResize)="resize($event)" [obsOptions]="{box: 'content-box'}" #elem="directive">...</div>

• MutationDirective - Allow observe DOM tree changes

<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