Bootstrap + Angular6: тост не появляется, пока я не вызову .toast второй раз ('show')

Question

У меня проблема с использованием bootstrap тостов из приложения Angular 6. Кажется, что тост не появляется, пока я не вызову функцию jquery во второй раз, чтобы показать тост, например:

$('#toastScore').toast('show');

Тост (очищенный) отображается так в моем шаблоне:

 <div id="toastScore" *ngIf="scoreMessage" role="alert" class="toast" data-autohide="false" data-animation="true">
  <div class="toast-body">
    {{scoreMessage}}
  </div>
</div>

В коде моего компонента я делаю это, чтобы включить тост:

setScoreMessage(message: string): void {
  this.scoreMessage = message;
  $('#toastScore').toast('show');
}

При первом вызове setScoreMessage () тост не появляется, а во второй раз. Я подозреваю, что проблема в том, что Angular еще не отображал тост в DOM при первом вызове jquery, но я не знаю, как это исправить.

Любой ввод приветствуется.

Я использую bootstrap 4.4.1 и jquery 3.4.1

РЕДАКТИРОВАТЬ: Я нашел (неприятный) обходной путь, установив флаг, когда я хочу отобразить провозглашать и проверять этот флаг в событии ngAfterViewChecked (), которое происходит позже в жизненном цикле, где DOM, похоже, обновляется на Angular. Если флаг установлен в ngAfterViewChecked (), я тогда вызываю jquery, чтобы показать тост. Я уверен, что есть более чистый способ сделать это, поэтому все еще очень заинтересован в том, чтобы получить здесь несколько советов.