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