ngx-observers

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