Creating a Simple Dialog

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:

1. Open the products.module.ts file and add the following import statement: