Angular 6 - Bootstrap - How to capture modal dialog close event?

Question

I want to capture the close event of bootstrap modal dialog to do some jobs, but don't know how to do this. My first thought was to bind event to the buttons, but it was a little bit ineffective since the dialog could be closed when click outside of the dialog box. I've searched and gathered a few solutions but some didn't work or were irrelevant to Angular 6. Hope someone here knows how to do. Thanks a lot!

Here is my modal:

<div class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="listNamecardShareTitle">Select namecards to share</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <div class="modal-body">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Fullname</th>
              <th>Company</th>
              <th>Select</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of namecards">
              <td>{{ item.fullname }}</td>
              <td>{{ item.company }}</td>
              <td><input type="checkbox" [(ngModel)]="selected[namecards.indexOf(item)]"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary fas fa-paper-plane" data-dismiss="modal" (click)="onClickSend()">&nbsp;Send</button>
      </div>
    </div>
  </div>
</div>

which bootstrap library are you using ? ngbootstrap ? ngxbootstrap ? — Stavm
Bootstrap should have close event like hidden.bs.modal where you can hook up with RxJS fromEvent and be able to subscribe to that event — dK-
@Stavm I'm using bootstrap 4 installed from npm. Probably ngbootstrap :) — Brother Eye
By using backdrop: "static" you can prevent from closing the modal when clicking outside. More info - w3schools.com/bootstrap/… and - w3schools.com/bootstrap/… — Alok Mali

lezhumain lezhumain · Accepted Answer · 2020-01-16T17:47:28

I think the main idea for this would be something like the following:

fromEvent(htmlElemRef.nativeElement, "shown.bs.modal").subscribe( () => {
    console.warn("\tModal is now visible");
});

where htmlElemRef is one of your component's property defined as follows:

ts:

@ViewChild("htmlElemRef", {static: false}) htmlElemRef: ElementRef<HTMLDivElement>;

html:

<div #htmlElemRef class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">

But at the moment i'm writing these lines I still haven't got it working using fromEvent (will edit when I find out), so i'm using the following workaround with jQuery:

$(htmlElemRef.nativeElement).on("shown.bs.modal", () => {
    console.warn("\tModal is now visible");
});

Angular 6 - Bootstrap - How to capture modal dialog close event?

1 Answers