ng-observers

Angular (6+) directives for native observers API for detecting element's size change, visibility and DOM manipulations.

Giving you onResize(), onMutate() and onIntersection() using ResizeObserver, MutationObserver and IntersectionObserver.

---

Demonstration

Demo on Stackblitz

Getting started

npm i ng-observers

Then import NgObserversModule:

import { NgObserversModule } from 'ng-observers';

@NgModule({
  declarations: [AppComponent],
  imports: [NgObserversModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage Example

Resize:

<div resizeObserver (onResize)="onResize($event)"></div>

Intersection:

<div intersectionObserver (onIntersection)="onIntersection($event)"></div>

Mutation:

<div mutationObserver (onMutate)="onMutate($event)"></div>

class AppComponent {

  onResize(event) {
    // ...
  }
  
  onIntersection(event) {
    // ...
  }

  onMutate(event) {
    // ...
  }
  
}

Additional options for mutationObserver:

<div mutationObserver
     [options]="{attributes: true, subtree: true}"
     (onMutate)="onMutate($event)"></div>

options is optional, structured as MutationObserverInit:

options = {
    childList: false,
    attributes: true,
    subtree: false,
    characterData: true
}