Диалог начальной загрузки не закрывается при вызове модального режима («скрыть»)

Question

В коде https://stackblitz.com/edit/angular-a9wcee

Я показываю диалог Bootstrap при запуске приложения.Но диалоговое окно не закрывается при нажатии кнопки закрытия.Что я делаю не так?

В index.html я создаю корневой компонент приложения и передаю атрибут, который отображается в диалоговом окне

<my-app signup="startup message">loading </my-app>

В app.component.ts, в ngAfterViewInit, Я читаю атрибут и показываю диалоговое окно (после вызова setTimeout, так как мне нужно дождаться окончания обнаружения изменений)

ngAfterViewChecked(){

    this.signup = this.el.nativeElement.getAttribute('signup');

    setTimeout(()=>this.isSignupProcess());
  }

app.component.html имеет компонент диалогового окна

  Hope to see dialog when the application starts!  

      <button>Am I clickable</button>
      <app-dialog-box #dialogBox [dialogMessage]="" [dialogID]="'appDialog'" [context]=""></app-dialog-box>

Компонент диалогового окна является модальным Bootstrap.

<div class="modal" #modal tabindex="-1" role="dialog" id="someID">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{dialogMessage}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="dialogHide()">Close</button>
      </div>
    </div>
  </div>
</div>

Компонент диалогового окна также имеет функции для отображения и скрытия модального окна.

dialogShow(message:string,context:DialogContext){

   this.context = context;
    this.dialogMessage = message;
    //console.log("dialog show called ");
    $(this.dialogRef.nativeElement).modal('show');

  }

  dialogHide(){
   // console.log("dialog hide called");
    $(this.dialogRef.nativeElement).modal('hide');
  }
}

Но dialogHide не скрывает модал.Почему?