Tuesday, 13 March, 2018 UTC


Summary

  • 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…
@AngularUniv: #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.
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