title: Bootstrap modal close event does not trigger a close of modal overlay
body: <p>I have a scenario where I want to add new requests and edit existing requests using a single component and regenerating it with correct data when required. Following is the code for base component.</p>
  
  <p><strong>home-component.html</strong>  </p>
  
  <pre><code>&lt;ul class="request-list"&gt;
    &lt;li class="request-list-element" *ngFor="let requestItem of requestList; index as i"&gt;
      &lt;div class="request-element-{{i}}" &gt;
       .
       .
       .
       &lt;div (click)="showReqform(requestItem,i)" data-toggle="modal" data-target="#requestModal"&gt;
         &lt;mat-icon&gt;create&lt;/mat-icon&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;button mat-mini-fab type="button" (click)="showReqform(formData,-1)" data-toggle="modal" data-target="#requestModal" &gt;
    &lt;mat-icon aria-label="Add a Request"&gt;add&lt;/mat-icon&gt;
  &lt;/button&gt;
  &lt;div class="addRequest"&gt;
    &lt;app-reqeust-form [dataValue]="formData" (removeEvent)="removeDialog()" *ngIf="isNewFormVisible"&gt;&lt;/app-reqeust-form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>home-component.ts</strong></p>
  
  <pre><code>ngOnInit() {
    this.data.getRequestList().subscribe( dataResponse =&gt; {
      this.requestList = dataResponse asRequest[]
    })
  }
  
  showReqform(dataFormValue,indexValue){
    if(indexValue == -1)
      this.formData = &lt;Request&gt;{}
    else
      this.formData = dataFormValue
    this.isNewFormVisible = !this.isNewFormVisible
  }
  
  removeDialog(){
    this.data.getRequestList().subscribe( dataResponse =&gt; {
      this.requestList = dataResponse as Request[]
      this.isNewFormVisible = false
    })
  }
  </code></pre>
  
  <p>The above component list all the req. and provides an edit option as well which will open a modal using the form component. The form is present in the following component:</p>
  
  <p><strong>request-form-component.html</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="requestModal" role="dialog" (click)="removeFunction($event)"&gt;
    &lt;div class="modal-dialog" role="document" &gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form id="requestForm" [formGroup]="addRequestForm"&gt;
            .
            .
            .
            // either the button for adding a request or updating the request
            &lt;div class="buttonDiv" *ngIf="!isEditRequest"&gt;
              &lt;button mat-raised-button (click)="addData()"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="button" *ngIf="isEditRequest"&gt;
              &lt;button mat-raised-button (click)="submitEditedData()"&gt; Update&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>request-form-component.ts</strong></p>
  
  <pre><code>@Input ()
  dataValue:Request
  
  @Output () 
  removeEvent = new EventEmitter()
  
  isEditRequest: Boolean
  
  ngOnInit() {
    if(Object.keys(this.dataValue).length === 0){
      // initialize dataValue with null values
      this.isEditRequest = false
    }
    else
      this.isEditRequest = true
  }
  
  removeFunction($event){
    if($event.target.attributes.role != undefined)
      if($event.target.attributes.role.value == 'dialog')
        this.removeEvent.emit()
  }
  
  addData() {
    this.data.addRequest(this.addRequestForm.value).subscribe(data =&gt; {
      //handling success scenario
      this.removeEvent.emit()
    }
  }
  
  submitEditedData(){
    this.data.editRequest(this.addRequestForm.value).subscribe(data =&gt; {
      //handle success scenario
      this.removeEvent.emit()
    }
  }
  </code></pre>
  
  <p>Now the problem is that clicking anywhere outside the modal defined area the modal closes and is removed from DOM. But when an update or add event happens the result is not the same. The modal closes but the overlay with opacity still remains. I can see this in the DOM </p>
  
  <pre><code>&lt;div class="modal-backdrop show"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I tried unsubscribing the subscription for add and edit request but did not have the desired effect.</p>