question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

(Dialog) Component-less alert and confirm dialogs

See original GitHub issue

Feature 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:open
  • Created 4 years ago
  • Reactions:21
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
tayambamwanzacommented, Feb 23, 2022

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.

1reaction
tayambamwanzacommented, Apr 26, 2022

@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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found