Bootstrap modal close event does not trigger a close of modal overlay

Question

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.

home-component.html

<ul class="request-list">
  <li class="request-list-element" *ngFor="let requestItem of requestList; index as i">
    <div class="request-element-{{i}}" >
     .
     .
     .
     <div (click)="showReqform(requestItem,i)" data-toggle="modal" data-target="#requestModal">
       <mat-icon>create</mat-icon>
     </div>
    </div>
  </li>
</ul>
<button mat-mini-fab type="button" (click)="showReqform(formData,-1)" data-toggle="modal" data-target="#requestModal" >
  <mat-icon aria-label="Add a Request">add</mat-icon>
</button>
<div class="addRequest">
  <app-reqeust-form [dataValue]="formData" (removeEvent)="removeDialog()" *ngIf="isNewFormVisible"></app-reqeust-form>
</div>

home-component.ts

ngOnInit() {
  this.data.getRequestList().subscribe( dataResponse => {
    this.requestList = dataResponse asRequest[]
  })
}

showReqform(dataFormValue,indexValue){
  if(indexValue == -1)
    this.formData = <Request>{}
  else
    this.formData = dataFormValue
  this.isNewFormVisible = !this.isNewFormVisible
}

removeDialog(){
  this.data.getRequestList().subscribe( dataResponse => {
    this.requestList = dataResponse as Request[]
    this.isNewFormVisible = false
  })
}

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:

request-form-component.html

<div class="modal fade" id="requestModal" role="dialog" (click)="removeFunction($event)">
  <div class="modal-dialog" role="document" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="requestForm" [formGroup]="addRequestForm">
          .
          .
          .
          // either the button for adding a request or updating the request
          <div class="buttonDiv" *ngIf="!isEditRequest">
            <button mat-raised-button (click)="addData()">Add</button>
          </div>
          <div class="button" *ngIf="isEditRequest">
            <button mat-raised-button (click)="submitEditedData()"> Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

request-form-component.ts

@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 => {
    //handling success scenario
    this.removeEvent.emit()
  }
}

submitEditedData(){
  this.data.editRequest(this.addRequestForm.value).subscribe(data => {
    //handle success scenario
    this.removeEvent.emit()
  }
}

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

<div class="modal-backdrop show"></div>

I tried unsubscribing the subscription for add and edit request but did not have the desired effect.

Answer 1

You should trigger the click event of close button.

<button #closebutton type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
</button>

In your component :

@ViewChild('closebutton') closeButton: ElementRef;
triggerClick() {
    let el: HTMLElement = this.closeButton.nativeElement as HTMLElement;
    el.click();
}

Answer 2

In Angular you can use hidden

<div [hidden]="hideModal"  class="modal fade" id="requestModal" role="dialog" (click)="removeFunction($event)">
  <div class="modal-dialog" role="document" >
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="initiateClose()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="requestForm" [formGroup]="addRequestForm">
          .
          .
          .
          // either the button for adding a request or updating the request
          <div class="buttonDiv" *ngIf="!isEditRequest">
            <button mat-raised-button (click)="addData()">Add</button>
          </div>
          <div class="button" *ngIf="isEditRequest">
            <button mat-raised-button (click)="submitEditedData()"> Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div> 

in you functions add this line

addData() {
    this.hideModal=true;// set false while you need open your model popup
   // do your more code
}