Как прокрутить вниз после клика и после полной загрузки данных?

Question

Я работаю над сайтом, использующим Angular 7. Внизу страницы у меня есть таблица с животными. Если пользователь нажимает на животное, под таблицей появляется список деталей. Я хочу, чтобы веб-сайт автоматически прокручивался вниз, как только данные загружаются и отображаются на веб-сайте. В верхней части сайта у меня есть список вопросов, которые сужают таблицу. Пока пользователь заполняет эти вопросы, я не хочу, чтобы веб-сайт прокручивался вниз.

Я пытался использовать ngAfterContentChecked и ngAfterViewChecked, но оба они стреляют слишком часто. Когда я заполняю вопрос, страница прыгает вниз.

Я также добавил логическое значение, для которого установлено значение false, но оно становится равным true после загрузки новых данных для деталей и сбрасывается до false после завершения прокрутки веб-сайта. Это не работает, потому что оба перехвата жизненного цикла ngAfter...Checked срабатывают до того, как весь контент действительно загружен, что означает, что веб-сайт прокручивает только часть пути.

Детали управляются в их собственном компоненте, и именно здесь я пытался управлять прокруткой. Компонент сведений отображается под вопросами и таблицей (которые находятся в одном компоненте).

Подробности машинопись:

@ViewChild('target') target: ElementRef;
toScroll:boolean = false;

ngOnChanges(){
  this.ingredientService.showIngredient(this.creature.id)
  .subscribe(ingredients => this.ingredients = ingredients
  )
  this.toScroll = true;
}

ngAfterContentChecked(){
  if(this.toScroll){
    this.target.nativeElement.scrollIntoView();
    this.toScroll = false;
  }
}

Подробности html:

<h2>{{ creature.species }}</h2>
<h3>Ingredients:</h3>
<p *ngIf="ingredients?.length == 0">No ingredients</p>
<ul>
  <li *ngFor="let item of ingredients">
    {{ item.species }}
    <ul>
      <li>{{ item.function1 }}</li>
      <li>{{ item.function2 }}</li>
      <li>{{ item.function3 }}</li>
      <li>{{ item.function4 }}</li>
    </ul>
  </li>
</ul>
<div #target></div>

Желаемый эффект заключается в том, что каждый раз, когда меняется список деталей (или каждый раз, когда кто-то нажимает на животное), веб-сайт прокручивается до самого дна, но он не прокручивается при изменении чего-либо еще.

Я получил его только для прокрутки всех изменений или не для прокрутки вниз до самого конца, потому что он начал прокручиваться до загрузки всех данных.