(Dialog) Component-less alert and confirm dialogs
See original GitHub issueFeature Description
My proposal is to create one or two methods on the MatDialog
provider/controller to allow component-less alert and confirm dialogs, for example:
// Alert dialog
this.dialog.alert({
title: 'Forbidden',
message: 'The resource you are trying to access is forbidden.',
okButton: 'OK'
})
// Confirm dialog
this.dialog.confirm({
title: 'Server error',
message: 'The server is currently in maintenance.',
confirmButton: 'Retry',
cancelButton: 'Cancel'
})
Alternatively, both alert
and confirm
could be on a single method:
this.dialog.alert({
title: 'The title',
message: 'The message',
confirmButton: 'OK', // Optional, only for confirm
dismissButton: 'Dismiss'
}).afterClose().subscribe((result: boolean) => console.log); // True if confirm, false if dismiss.
Use Case
Currently, we have to create a component for every dialog, event the simplest dialog. This is painful and useless in most cases. Other alternatives (what I do) is to create a AlertService
that does it for me. But makes no sense maintain it if it could be a simple feature of MatDialog
Issue Analytics
- State:
- Created 4 years ago
- Reactions:21
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Enhancements for Alert and Confirm Dialogs in ... - Oracle Blogs
The Alert and Confirm Dialogs now have an updated appearance and customize options for easily setting the style, title, icon, and even custom ......
Read more >Renderless Dialogs (Alert, Confirm, and Prompt) in Vue
Therefore, today we're going to build a "renderless dialog" object that will mimic the behavior of alert() , prompt() , and confirm() ....
Read more >Managing Confirm And Prompt Modals Outside Of The Router ...
Ben Nadel explores one approach to managing Confirm and Prompt modal windows in an Angular 7.2.15 application; but, outside of the Router.
Read more >The neatest way to handle alert dialogs in React
Lazy dev here and we will talk about handling dialog alerts in reac. ... const confirm = useConfirmation() confirm({ variant: "danger", ...
Read more >Building an expressive API for custom confirm dialogs in React
Building a simple Confirm Dialog component is easy in React. ... Imagine I have an <Alert /> component which takes the following props:....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For reference the old angular material had a few standard dialogs plus the ability to create custom dialogs. In the material design site you can also see “standard” dialogs.
https://material.angularjs.org/latest/demo/dialog https://material.io/components/dialogs#usage
I think 3 would be enough: alert, confirm, prompt.
@MikaStark I don’t think it’s about difficulty but convenience or DX. Most likely a lot of projects will alert, confirm and prompt users. Having to rebuild the same custom modals repeatedly when there can be one implementation based on the material spec is not the best way to go I believe.
Not saying it’s an absolute must but would be incredibly helpful and convenient to use standardized dialogs.
Also I linked the 2 projects above which did have this feature. Since this project is trying to make material components easy for angular developers to use, some standard features of the original library would be great to have, this is supported in mdc why not support it in angular too?