Скрыть Bootstrap Диалог в Angular 6 от компонента

Question

Я пытаюсь скрыть bootstrap диалог от компонента без удачи. Код моего диалогового окна указан ниже:

<div class="modal fade"  id="loading_video_upload" tabindex="-1" role="dialog"
     aria-labelledby="loading_video_upload_label"
     aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <img src="/assets/gif/gear_loading.gif"/>
      <div class="modal-footer">
        <button class="btn btn-primary" #loading_video_upload_btn id="hidebutton" data-dismiss="modal" data-target="loading_video_upload">Close
        </button>
      </div>
    </div>
  </div>
</div>

Код моего компонента указан ниже:

...
@ViewChild('video_upload_success_btn')
videoUploadSuccessDialogBtn: ElementRef;

some-apimethod() {
  this.loadingDialog.nativeElement.click();
}
...

Пожалуйста, помогите подсказать, где не работает.

Answer 1

Вы можете использовать $('#loading_video_upload').modal('hide');

Установить jquery и bootstrap с помощью команды npm.

Объявить var $: any; в компоненте

Использование может использовать $('#loading_video_upload').modal('hide'); в методе some-apimethod ()

Демо https://stackblitz.com/edit/angular-model-bootstrap-close