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

npm install ngx-observers --save

then add NgxSimpleTextEditorModule into module imports

import {NgxObserversModule} from "ngx-observers"; @NgModule({ // ... imports: [ // ... NgxObserversModule, // ... ], // ... })

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

See online

MIT