1

Scenario: I have an component called add-customer which i am displaying in an dialogue window by clicking an button called Addas shown in below image.

enter image description here

Here i have 2 buttons 1)Save and 2)Cancel

On clicking Cancel button one more dialogue window comes as shown in below image.

enter image description here

Here in the new dialogue window again i have two buttons called 1)Discard and 2)Cancel

On clicking Cancel the new window will close and the add-customer component will remain same as shown in below image.

enter image description here

Here my requirement are:

1) On clicking dicard button i want to close both the dialogue windows(mean i want to close two pop-up windows).

2) Here the add-customer component is closing when we are clicking outside the dialogue window,but i want it to be closed only on clicking discard button only.

I have tried by giving two different dialogRef for discard and cancel buttons. No result. Here is the stackblitz link.

Shankar
  • 2,565
  • 8
  • 29
  • 56

2 Answers2

3

you can try this,

Import MatDialog

import {MatDialogRef,MatDialog} from '@angular/material';

Inject in constructor

constructor(private dialog: MatDialog,..){}

And the cancelN method should be

public cancelN(): void { 
    this.dialog.closeAll();
}

Note: It will close all opened dialog(s)

mkHun
  • 5,891
  • 8
  • 38
  • 85
2

I am just posting this working stackblitz example, so that it would be helpful for next visitors.

Shankar
  • 2,565
  • 8
  • 29
  • 56