How to Resolve multiple concurrent Angular Material 2 Modal Dialog show issue in Internet Explorer

While creating an application in Angular 4 using Angular Material 2 modal dialog, it has been noticed that when there is a requirement to simultaneously keep two dialogs open at the same time the first opened dialog closes in Internet Explorer as soon as the second dialog is opened and the second pop-up shows wrong data.

Say for example we have a dialog “update form” to update a record. From that dialog we open another dialog “Information” to give some information required for this “update form”. We want both the dialogs to remain open at the same time. This feature works fine in other browsers but in IE the first dialog “update form” closes as soon the second dialog “Information” is opened.

Code Snippet in general:

1. First, we need to install angular material as shown:

Npm install angular-material –save
Npm install @angular/animations –save

2. Next, we need to import the modal dialog references to the typescript file where we want to render the modal.

import { MdDialog, MdDialogRef } from '@angular/material';

3. Next, we need to create a component variable for the modal

private dialogRef: MdDialogRef<any>;

4. We refer ‘MdDialog’ in constructor

constructor(private dialog: MdDialog) {
  }

5. We then create a template in html file which we want to display in the modal pop-up:

<ng-template #temp1>
  <div class="modal-header">
    <h4 class="modal-title">Update Form</h4> <button type="button" class="btn-info " (click)="showInfo();"><span class="">i</span></button>
    <button type="button" class="close" aria-label="Close" (click)="dialogRef.close()">
                  <span aria-hidden="true">&times;</span>
              </button>
  </div>
  <div class="modal-body">
<input type="number"  min="0" max="30" (change)="updateData()" />
  </div>
</ng-template>

6. We can refer the template from ts file as shown:

export class SampleComponent implements OnInit {
  @ViewChild(' temp1') private temp1: TemplateRef<any>;
}

7. We can open the dialog as shown:

showModal(data) {
    let config = { hasBackdrop: true, panelClass: ‘themeCss', width: '225px',skipHide: true,preserveScope: true };
      this.dialogRef = this.dialog.open(this. temp1, config);         
  }

8. Now in the above template you can see an info button which on click would open the info popup without closing the previous pop-up(Update Form) as shown below:
In html file:

<ng-template #tempInfo>
  <div class="modal-header">
    <h4 class="modal-title">Information</h4> 
    <button type="button" class="close" aria-label="Close" (click)="reportDialogRef.close()">
                  <span aria-hidden="true">&times;</span>
              </button>
  </div>
  <div class="modal-body">
{{Information}}
  </div>
</ng-template>

In typescript file:

private reportDialogRef: any;

showInfo (){
    //debugger;
    let dialogConfig = { hasBackdrop: false, skipHide: true, panelClass: 'cssthemeInfo', width: '300px', height: '400px' };
    this.reportDialogRef = this.dialog.open(this. tempInfo, dialogConfig);
    this.reportDialogRef.updatePosition({ top: '150px', left: "500px" });
  }

This code would open the second pop-up beside the first pop-up in other browsers like mozilla,safari and chrome.

But in IE on invoking the second info pop-up the first pop-up closes and the info pop-up opens with data from first template. It somehow cannot flush the first pop-up information in IE.

Solution:

So, we need to add one extra line to showInfo function and that solves the problem.

showInfo (){
    //debugger;
    let dialogConfig = { hasBackdrop: false, skipHide: true, panelClass: 'cssthemeInfo', width: '300px', height: '400px' };
        this.dialog.openDialogs.pop();

    this.reportDialogRef = this.dialog.open(this. tempInfo, dialogConfig);
    this.reportDialogRef.updatePosition({ top: '150px', left: "500px" });
  }

The pop() flushes old modal data and both the instances of the modals work properly.