I have a button called `Add` on clicking this button i am calling an component called `add-customer` inside the `dialog window` like this:

[![enter image description here](https://i.stack.imgur.com/QIgT4.png)](https://i.stack.imgur.com/QIgT4.png)

**Scenario:** If i made any changes in the `input fields` of the `add-customer` component and click `CANCEL` button one more `dialogue` will be called with an message like this:

[![enter image description here](https://i.stack.imgur.com/AFQ12.png)](https://i.stack.imgur.com/AFQ12.png) 

**Here is the issue is:** 

The `2nd dialog window` is coming **only if the changes made in required input fields and click CANCEL button** , but I want to call the `2nd dialog window` even **if i made changes in any of the input fields and checkbox.**

Here is the [stackblitz](https://stackblitz.com/edit/angular-modal-issue-d5ikgz?file=app/demo/demo.component.ts) demo.