i am trying to use an IntersectionObserver in my Angular application but it doesn't work as expected. I don't have a reproducible example as this affects a productive implementation, maybe this simple case might be enough. So i have a view that generates certain elements via the *ngFor directive:

app.component.html

<div *ngFor="let row of dataSource$ | async" #rows>

app.component.ts

@ViewChildren('rows') rows: QueryList<ElementRef<HTMLElement>>;

private observer: IntersectionObserver;

ngAfterViewInit(): void {
    this.observer = new IntersectionObserver(entries => {
      console.log(entries);

      if (entries[0].isIntersecting) {
        console.log('BottomElement is intersecting');
      }

      if (entries[1].isIntersecting) {
        console.log('TopElement is intersecting');
      }
     }

    this.rows.changes.subscribe(elements => {
      this.observer.observe(elements.last.nativeElement);
      this.observer.observe(elements.first.nativeElement);
    });
}

So i am basically adding the first and last generated to the IntersectionObserver. If i start my application, everything works fine and i get the following console outputs:

(2) [IntersectionObserverEntry, IntersectionObserverEntry]
TopElement is intersecting

But once i start scrolling down, as soon as the TopElement vanishes, the IntersectionObservable outputs:

[IntersectionObserverEntry]
BottomElement is intersecting
ERROR TypeError: Cannot read properties of undefined (reading 'isIntersecting')

So the IntersectionObservable loses the TopElement to be observed. Strange enough, the BottomElement does not has any problems, so scrolling up and down the BottomElement keeps being observed.

Any ideas what the problem might be?