Angular Directives For Native Observers API

Author: evyros
Official Page: Go to website
Publish Date: April 20, 2020
License: MIT

Description:

A set of Angular directives for native observers API for detecting element’s size change, visibility and DOM manipulations using ResizeObserverMutationObserver, and IntersectionObserver.

Install & Import:

# NPM
$ npm install ng-observers --save
import { NgObserversModule } from 'ng-observers';
@NgModule({
  declarations: [AppComponent],
  imports: [NgObserversModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Basic Usage:

<div resizeObserver (onResize)="onResize($event)"></div>
<div intersectionObserver (onIntersection)="onIntersection($event)"></div>
<div mutationObserver (onMutate)="onMutate($event)"></div>
class AppComponent {
  onResize(event) {
    // ...
  }
  onIntersection(event) {
    // ...
  }
  onMutate(event) {
    // ...
  }
}

Preview:

Angular Directives For Native Observers API


You Might Be Interested In:

Add Comment