ngx-intersection-observer

Observe visiblity of elements and get notified when they visit/leave the window viewport.

## Features
- Observe elements via IntersectionObserver API or fallback to scroll listener to detect if the element enters/leaves the viewport.
- Apply or remove classes based on element visiblity
- Specify threshold, how many precentage of the element need to be visible to trigger intersection.
- Specify intersection method (IntersectionObserver API or scroll listener)
- Event binding for intersecting elements.

## Dependencies

---

ngx-intersection-observer | Angular
--- | ---
1.0.13 | >=13.x

## Install

---

Install the package via NPM
``shell
$ npm install --save ngx-intersection-observer
`

Import the module
Import the module to your angular application
`typescript
//...
import { IntersectionObserverModule } from 'ngx-intersection-observer';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
IntersectionObserverModule.forRoot({
debounce: 50,
threshold: 30,
autoRemove: true
} as IntersectionObserverConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Usage and Options

---

Name | Type | Description | Optional | Default
--- | --- | --- | --- | ---
visitClass | String | List of classes to apply, when the element visits the windows viewport. | Yes
leaveClass | String | List of classes to apply, when the element leaves the window viewport. | Yes
removeVisitClass | String | List of classes to remove, when the element visits the window viewport.
removeLeaveClass | String | List of classes to remove, when the element leaves the windows viewport. | Yes
autoRemove | Boolean | true / false If true classes will be removed automatically when the element leaves the viewport, otherwhise use removeVisitClass property. | Yes | true
useScroll | Boolean | true / false If true, use scoll listener otherwhise use IntersectionObserver. By default IntersectionBehavior is used, fallback to scroll listener. | Yes | true
threshold | Number | Specifies how many precentage of the element need to be visible in the viewport to treat it as intersection. Specify a value between 0% and 100% | Yes | 30%
intersection | Event | Function which is called when the element enters/leaves the viewport. | Yes

Example
`html