Как заставить scrollIntoView() работать при первом нажатии (Angular 6)?

Предыдущее решение аналогичного вопроса StackOverflow сосредоточено на Jquery, и для angular 6/Javascript не найдено возможного решения.

В настоящее время я использую scrollIntoView() с плавным поведением для прокрутки к динамически созданному div с использованием выхода маршрутизатора, но он прокручивается только после второго щелчка, есть ли что-то не так в моем коде или его можно достичь в первый клик ?

HTML:

<div>
  <mat-card-title (click) = "articleNavigation(documents._id)">{{documents.title}}</mat-card-title>
</div>
<div #test style = "width:50%; margin-left: auto; margin-right: auto;">
  <router-outlet></router-outlet>
</div>

тс:

articleNavigation(documentId) {
 this.router.navigate(['./document' , documentId], { relativeTo: this.route });
 this.test.nativeElement.scrollIntoView({behavior: 'smooth'});
}

Если я использую авто поведение вместо сглаженного, оно срабатывает при первом нажатии, но плавный переход предпочтительнее. Одна из возможных причин, которая, я думаю, заключается в том, что при первом щелчке создается div, а при втором щелчке scrollIntoView() переходит к div.