Creating a Simple Dialog
Discover pop-ups and modal dialogs and how to create dialogs for interacting with the user in an Angular application.
We'll cover the following
Pop-ups and modal dialogs
There are different ways to capture the user’s attention in a web application. One of them is to show a pop-up dialog over the content of the page and prompt the user to act accordingly. Another way is displaying information about a part of the page when the user hovers over that part.
Angular Material offers three different components for handling such cases:
Dialog: A modal pop-up dialog that displays itself on top of the page content.
Tooltip: A piece of text that is displayed when we hover over a specific area.
Snackbar: An information message displayed at the bottom of a page and is visible for a short time. Its purpose is to notify the user of the result of an action, such as saving a form.
We will focus on the dialog component, which is widely used in Angular applications. In the following section, we learn how to create a simple dialog.
Changing the product price using dialog
The dialog component is quite powerful and can easily be customized and configured. It is an ordinary Angular component and uses custom directives that make it behave like a dialog. To explore the capabilities of the Angular Material dialog, we will change the price of an existing product using a prompt dialog:
Open the
products.module.ts
file and add the followingimport
statement:
Get hands-on with 1200+ tech skills courses.