Прокрутите div вниз, когда Observable будет завершен

Question

У меня есть div с сообщениями, и я хочу убедиться, что вся информация о чате была получена, чтобы прокрутить div вниз до последнего сообщения, но это не работает, это дает мне эту ошибку:

Невозможно прочитать свойство 'scrollHeight' с нулевым значением

TS ЧАТ КОМПОНЕНТ

 ngOnInit() {
    this.chat$ = this._cs.joinUsers(source).pipe(tap(() => this.scrollBottom()));
  }

  scrollBottom() {
    const CHAT_BODY = document.getElementById("card-body");
    CHAT_BODY.scrollTop = CHAT_BODY.scrollHeight;
  }

Примечания: Элемент card-body загружается chat$ | async

Я пытался использовать finallize() и ngAfterViewInit(), но не повезло. НО если я скопирую свой код из scrollBottom() в console после того, как я все увижу на странице, он будет работать нормально. Так что проблема в том, что становится триггером, а в Observable это еще не сделано. может быть?

Мой вопрос отличается от других решений, которые я видел в SO, потому что они не используют наблюдаемые, и элемент еще не существует, когда запускается наблюдаемое.

UPDATE:

Я попытался получить доступ к элементу с помощью ViewChild и получил эту ошибку:

Я получил эту ошибку: свойство 'nativeElement' не определено

  @ViewChild("cardBody")
  cardBody: ElementRef;
  ngAfterViewInit() {
    console.log("Values on ngAfterViewInit():");
    console.log(this.cardBody.nativeElement );
  }

HTML

 <ng-container *ngIf="(chat$ | async) as chat">
    <ng-container *ngIf="(auth.user$ | async) as user">
      .
      .
      <div class="card-body msg_card_body" id="card-body" #cardBody>
      .
      .
      .
      </div>
  </ng-container>
</ng-container>

Answer 1

Наконец-то удалось получить решения для этого:

Решение 1)

 <div  class="card-body msg_card_body" id="card-body" #cardBody
  [scrollTop]="cardBody.scrollHeight">
 .
 .
 </div>

Решение 2)

ngAfterViewInit() {
    setTimeout(() => {
     this.scrollBottom();
    }, 500);  
}
scrollBottom() {
  const CHAT_BODY = document.getElementById("card-body");
  CHAT_BODY.scrollTop = CHAT_BODY.scrollHeight;
}