CODEWITHSUNDEEP
angularangular-material
LeO
LeO

Reputation: 5260

Angular Material: Open second dialog left to the first on same level

The use case: I have a record of a customer and want to display additional information in a second dialog. This information is read only, i.e. I need just some selections.

I have opened in Angular Material one modal dialog. To open a second seems quite easy. I have created a sample on Stackblitz.

this.dialog.open(DialogElementsExampleDialog2, ...

So my challenge is now

  1. After opening the second dialog: position the dialogs and resize them to fit next to each other on the screen.
  2. Open the second dialog on the same level as the first, i.e. not over the very first.
  3. The second one should be closable independent from the very first one. If the very first one closes the second should close as well.

For positioning and moving around the second dialog I have already a custom solution. So I just need to dis

Upvotes: 0

Views: 1989

Answers (1)

Denis
Denis

Reputation: 309

Do you need the second dialog?

I altered your stackblitz example to have a hidden second div that can only be opened via the first dialog and has a button to close itself.

https://stackblitz.com/edit/angular-idmii3-dezz4p

otherwise I think it will be a bigger undertaking to extend the dialog module with this functionality and might not be very future proof. But then I think its easier to create a fully custom dialog box yourself with css and functionality as needed.

Upvotes: 1

Related Questions