Skip to content


Created by Enea Jahollari

injectIsIntersecting is a helper function that returns an observable that emits when the component/directive or a given element is being intersected.

To handle this, IntersectionObserver is being used underneath. The intersection logic runs outside zone for better performance.

import { injectIsIntersecting } from 'ngxtension/inject-is-intersecting';


We can use it to listen to component itself being intersected.

export class MyComponent {
private destroyRef = inject(DestroyRef);
isIntersecting$ = injectIsIntersecting();
isInViewport$ = this.isIntersecting$.pipe(
filter((x) => x.intersectionRatio > 0),
ngOnInit() {
getData() {
// Only fetch data when the element is in the viewport
return this.isInViewport$.pipe(
switchMap(() => this.service.getData()),

Or, we can use it to listen to a given element being intersected.

template: `
<div #myDivRef></div>
export class MyComponent implements OnInit {
@ViewChild('myDivRef', { static: true }) myDivEl!: HTMLDivElement;
private injector = inject(Injector);
ngOnInit() {
const divInViewport$ = injectIsIntersecting({
element: this.myDivEl,
injector: this.injector,
}).pipe(filter((x) => x.intersectionRatio > 0));
// Only fetch data when the element is in the viewport
switchMap(() => this.service.getData()),