https://github.com/raiper34/ngx-observers

Ngx observers is library to allow developer use Resize, Mutation and Intersection observer api like normal output events on some element.
https://github.com/raiper34/ngx-observers

angular intersection intersection-observer mutation mutationobserver observers resize resizeobserver

Last synced: 11 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/raiper34/ngx-observers
• Owner: Raiper34
• License: mit
• Created: 2022-09-07T19:01:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-10T19:10:02.000Z (about 3 years ago)
• Last Synced: 2025-03-26T18:18:00.961Z (11 months ago)
• Topics: angular, intersection, intersection-observer, mutation, mutationobserver, observers, resize, resizeobserver
• Language: TypeScript
• Homepage: https://ngx-observers.netlify.app/modules/ngxobserversmodule
• Size: 935 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Ngx observers

[![npm version](https://badge.fury.io/js/ngx-observers.svg)](https://badge.fury.io/js/ngx-observers)

[![CircleCI](https://circleci.com/gh/Raiper34/ngx-observers.svg?style=shield)](https://circleci.com/gh/Raiper34/ngx-observers)

[![GitHub issues](https://img.shields.io/github/issues/Raiper34/ngx-observers)](https://github.com/Raiper34/ngx-observers/issues)

![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-observers)

![NPM](https://img.shields.io/npm/l/ngx-observers)

[![docs](https://badgen.net/badge/docs/online/orange)](https://ngx-observers.netlify.app)

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

```typescript

import {NgxObserversModule} from "ngx-observers";

@NgModule({

// ...

  imports: [

    // ...

    NgxObserversModule,

    // ...

  ],

// ...

})

```

## Usage

- **[ResizeDirective](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver)** - Allow observe resize event of given object

```html

...

```

- **[MutationDirective](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver)** - Allow observe DOM tree changes

```html

...

```

- **[Intersection directive](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)** - Allow observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport

```html

...

```


You can access directive original observer object (e.g. `this.obsResize.observer`) using template variables (`#elem="directive"`):

```ts

@ViewChild('elem') obsResize: ResizeDirective | undefined;

@ViewChild('elem') obsMutation: MutationDirective | undefined;

@ViewChild('elem') obsIntersection: IntersectionDirective | undefined;

```

# Documentation

See [online](https://ngx-observers.netlify.app/modules/ngxobserversmodule)

# License

MIT