Вызов функции, когда угловая привязка обновлена ​​DOM

Question

Я реализовал бесконечную прокрутку в моем компоненте. Теперь попробуйте внедрить обновление URL-адреса, чтобы отобразить номер просматриваемой в данный момент страницы, когда страница прокручивается на уже загруженных элементах (чтобы это выглядело как правильная подкачка). Самая близкая вещь, которую я мог найти, была Waypoint. Но возникают сложности, потому что его использование подразумевает некоторую прямую манипуляцию с DOM, которая на самом деле не является угловым способом работы.

Проблема в том, что bindWaypoints вызывается после того, как новые элементы вставлены в массив, но до того, как они отобразятся на странице (то есть DOM), поэтому я не могу получить их и связать. Интересно, что это не так для первой загрузки компонента, когда элементы отображаются сразу и находят просто отлично. Любые предложения о том, как избежать привязок DOM, приветствуются.

компонент бесконечной прокрутки

<div class="row" infinite-scroll
         [infiniteScrollDistance]="1"
         [infiniteScrollUpDistance]="2"
         [infiniteScrollThrottle]="1000"
         [immediateCheck]="false"
         (scrolled)="onScrollDown()"
         (scrolledUp)="onScrollUp()">

      <app-item-thumbnail *ngFor="let itemThumbnail of shownItems" [itemThumbnail]="itemThumbnail" class="item-thumbnail item-thumbnail-of-page-{{ itemThumbnail.page }} col-12 col-sm-12 col-md-6 col-lg-3"></app-item-thumbnail>
</div>

когда страница прокручивается вниз или вверх, URL обновляется, чтобы указывать на новую страницу, и эта функция вызывается для получения новых данных с сервера.

shownItems: DisplayedItemThumbnail[] = [];
getItems(): void {
  this.itemService.indexThumbnails().subscribe((data: EntityIndex<ItemThumbnail>) => {
    this.index = data;
    this.index.entities = data.entities.map(e => new ItemThumbnail(e));
    if (this.nextNavigationOperation == Operation.Prepend) {
      this.appendItems(this.index);
    } else {
      this.prependItems(this.index);
    }
    this.loadedPages.push(data.page);
    this.nextNavigationOperation = Operation.Initial;
    this.bindWaypoints(this.index.page);
  });
}
bindWaypoints(page: number) {
  // the result is empty, because elements aren't rendered in html yet
  let insertedElements = document.getElementsByClassName("item-thumbnail-of-page-" + page); 
  for (let i = 0; i < insertedElements.length; i++) {
    let e: HTMLElement = insertedElements[i] as HTMLElement;
    if (e) {
      let waypoint = new Waypoint({
        element: e,
        handler: function (direction) {
          console.log("IT WORKS!!1 " + direction + "PAGE: " + page);
        }
      });
    }
  }
}
appendItems(index: EntityIndex<ItemThumbnail>) {
  this.addItems(index, 'push');
}

prependItems(index: EntityIndex<ItemThumbnail>) {
  this.addItems(index, 'unshift');
}

addItems(index: EntityIndex<ItemThumbnail>, _method: string) {
  for (let i = 0; i < index.entities.length; ++i) {
    let d = new DisplayedItemThumbnail(index.entities[i]);
    d.page = index.page;
    this.shownItems[_method](d);
  }
}