https://github.com/odonno/ng-intersection-observer
Intersection Observer for Angular
https://github.com/odonno/ng-intersection-observer
angular directive intersection-observer intersectionobserver
Last synced: about 1 month ago
JSON representation
Intersection Observer for Angular
- Host: GitHub
- URL: https://github.com/odonno/ng-intersection-observer
- Owner: Odonno
- Created: 2022-08-11T12:02:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-05T17:32:16.000Z (over 2 years ago)
- Last Synced: 2025-05-27T11:52:52.971Z (4 months ago)
- Topics: angular, directive, intersection-observer, intersectionobserver
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-intersection-observer
- Size: 521 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ng-intersection-observer
Intersection Observer for Angular
## Get started
```
npm install ng-intersection-observer --save
```
Once everything is installed, you need to add the module into your own module.
```ts
import { IntersectionObserverModule } from 'ng-intersection-observer';
@NgModule({
...,
imports: [
IntersectionObserverModule
],
...
})
export class AppModule { }
```
## How to use?
You can then use the directive inside your components.
```html
```
You will have the possibility to configure the observer with the following params:
- `observeVisibilityRoot` - the root container used - to see if the element is visible (`Document` by default)
- `observeVisibilityRootMargin` - the margin applied to the root container to detect visibility (`0` by default)
- `observeVisibilityThreshold` - the threshold level to detect when the element should be considered visible or hidden (`0` by default)
And then by observing the intersection, you can listen to the following events:
- `visible` - when the element become visible inside the root element
- `hidden` - when the element is now hidden