ngx-in-view

🔍 Angular directive to detect when an element enters the viewport using IntersectionObserver. Add animation classes or trigger callbacks with ease.

---

✨ Features

• 🔁 Automatically detect when an element comes into view
• 🎨 Add CSS animation classes
• 🔔 Trigger callbacks via (inView) event
• ⚙️ Configurable threshold and trigger behavior
• 🧩 Works great with lazy-loading and animation libraries like Animate.css or GSAP

---

📦 Installation

1npm install ngx-in-view
2
3## 🧰 Parameters
4
5| Parameter         | Type                    | Default  | Description                                                                 |
6|-------------------|-------------------------|----------|-----------------------------------------------------------------------------|
7| `ngxElementInView`       | `string`                | `''`     | (Optional) Space-separated CSS classes to apply when element is in view     |
8| `threshold`       | `number`                | `0.1`    | (Optional) Visibility ratio (0 to 1) required to trigger the directive       |
9| `triggerOnce`     | `boolean`               | `true`   | (Optional) If true, the directive triggers only once                        |
10| `visibilityBeforeInView`     | `boolean`               | `true`   | (Optional) If false, the element will display only once in view                       |
11| `(inView)`        | `EventEmitter<void>`    | —        | Emits when the element becomes visible in the viewport                      |
12
13
14## Example
15
16<div
17  [ngxElementInView]="'fade-in bounce'"
18  [threshold]="0.3"
19  [triggerOnce]="true"
20>
21  This will animate when it appears in the viewport!
22</div>