Sharing Top Content from the Angular-sphere.

Angular Material Dialog: A Complete Example

#Angular Material Dialog: A Complete Example

  • In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component.
  • We are going to cover many of the most common use cases that revolve around the Angular Material Dialog, such as: common dialog configuration options, passing data into the dialog, receiving data back, and dialog layout options.
  • Table of Contents – – In this post, we will cover the following topics: – – – – Declaring a Material Dialog body component – Creating and opening an Angular Material Dialog – Angular Material Dialog Configuration Options – Building the Material Dialog body – Passing Input Data to the…
  • for example, we are setting disableClose to true, which means that the user will not be able to close the dialog just by clicking outside of it – we are also setting autoFocus to true, meaning that the focus will be set automatically on the first form field of the…
  • But if we want the dialog to have the typical Material Design look and feel, we can build the template using the following directives: – – – – – Using these directives, our dialog will look something like this: – – – – – – Here are the 3 main…

In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component.

We are going to cover many of the most common use cases that revolve around the Angular Material Dialog, such as: common dialog configuration options, passing data into the dialog, receiving data back, and dialog layout options.

This is a step-by-step tutorial, so I invite you to code along as we are going to start with a simple initial scenario. We will then progressively add features one by one and explain everything along the way.

Table of Contents

In this post, we will cover the following topics:

Declaring a Material Dialog body component

Creating and opening an Angular Material Dialog

Angular Material Dialog Configuration Options

Building the Material Dialog body

Passing Input Data to the Material Dialog

Closing The Dialog + Passing Output Data

Source Code + Github Running Example

Step 1 of 5 – Declaring a Material Dialog body component

In order to use the Angular Material Dialog, we will first need to import MatDialogModule:

Angular Material Dialog: A Complete Example