Non-modal dialog in Angular 11

Question

quick question. I couldn't find an answer so far. Is there any way to create a non-modal material dialog in the latest Angular version? I also looked that up here in the forum but also couldn't find a solution for older versions of Angular.

I would appreciate an answer.

Best wishes, Nik

Answer 1

The "Angular" itself is framework, and hence will never have such a feature in itself.

You've added the angular-material tag, so I assume that's what you're referring to - there is MatDialog which can be further configured to be non-modal (though that depends on the definition I guess).

You can use hasBackdrop: false (see docs) to enable interacting with elements in the background for the MatDialog.

You can add a bit of cdkDrag magic (see docs) to make the dialog draggable.

I've put together a quick example on stackblitz.

Note that the dialog will still work as a "focus trap", i.e. if you keep pressing tab the focused elements will circle around the contents of the dialog.

If all of the above is not enough, it should be fairly easy to implement your own service for generation of fully non-modal dialogs using the Angular CDK overlay (which is the foundation upon which the MatDialog is actually built if I recall correctly). See the docs.