Alternatively you can use Observable-based services:

1. IntersectionObserveeService can be used to observe elements under waIntersectionObserver directive in the DI tree

2. IntersectionObserverService can be used to observe single element independently. Provide tokens manually to
configure it:

`ts
@Component({
selector: 'my-component',
providers: [
IntersectionObserverService,
{
provide: WA_INTERSECTION_THRESHOLD,
useValue: 0.5,
},
{
provide: WA_INTERSECTION_ROOT_MARGIN,
useValue: '10px',
},
],
})
export class Example {
protected readonly sub = inject(IntersectionObserverService)
.pipe(takeUntilDestroyed())
.subscribe((entries) => {
console.log(entries);
});
}
`

> In this case provide WA_INTERSECTION_ROOT` up the DI tree if you want to observe intersection with a particular
> parent element

Browser support

| | | | |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 15+ | 55+ | 51+ | 12.2+ |

> You can use polyfill to support older browsers

Demo

You can try online demo here

See also

Other Web APIs for Angular by
@ng-web-apis