Hide Bootstrap Dialog in Angular 6 from Component

Question

I am trying to hide bootstrap dialog from a component with no luck. My Dialog code is as below:

<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>

My Component Code is as below:

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

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

Please help me suggest where is not working.

please come with a working snippet, if you have a snippet that shows your problem clearly, it will solve your problem much faster compare to come without a snippet — Nisharg Shah, Apr 23 '20 at 04:45
with @viewchild you are trying to access an angular component which does not exist, try using native api which is not recommended but will work document.querySelector('#id_of_button') for more info try this link https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — njwin07, Apr 23 '20 at 04:52
did you try this link https://stackoverflow.com/a/56810262/4964569 — Hien Nguyen, Apr 23 '20 at 06:43

score 1 · Accepted Answer · answered Apr 23 '20 at 06:46

You can use $('#loading_video_upload').modal('hide');

Install jquery and bootstrap by npm command.

Declare var $ : any; in component

Use can use $('#loading_video_upload').modal('hide'); on some-apimethod() method

Demo https://stackblitz.com/edit/angular-model-bootstrap-close

Hide Bootstrap Dialog in Angular 6 from Component

1 Answers1