Angular Материал cdk-virtual-scroll-viewport неправильно прокручивается при обновлении контента

Question

Я использую cdk-virtual-scroll-viewport для отображения списка сообщений в чате. Сообщения хранятся в массиве строк, и этот массив обновляется при каждом получении сообщения.

Моя проблема заключается в том, что при использовании scrollTo({ bottom: 0 }) в окне просмотра сразу после обновления содержимого оно прокручивается только до второго последний элемент в области просмотра.

Если функция scrollTo() размещена в пределах setTimeout с задержкой 0, тогда область просмотра будет правильно прокручиваться вниз. Однако проблема в этом заключается в небольшой задержке между обновлением содержимого на странице и прокруткой. Это приводит к тому, что область просмотра и полоса прокрутки беспорядочно переходят к нижней части каждого нового сообщения, что довольно зрительно раздражает.

Есть ли способ отложить обновление страницы до тех пор, пока область просмотра не будет перерисована и правильно прокручена до нижний?

Окно просмотра:

<cdk-virtual-scroll-viewport [itemSize]="50" id="messages" #messageViewport>
  <mat-card *cdkVirtualFor="let message of messages">
    <mat-card-content>
      {{ message }}
    </mat-card-content>
  </mat-card>
</cdk-virtual-scroll-viewport>

Код соответствующего компонента:

messages: string[] = [];
@ViewChild('messageViewport') messageViewport: CdkVirtualScrollViewport;

ngOnInit() {
  this.chatService.connect().subscribe((messages) => {
    this.messages = messages;
    this.messageViewport.scrollTo({ bottom: 0 });
  });
}