In this Angular Material 9 tutorial, we’ll discuss how to implement Material Modal popup using Dialog API and pass data between parent and Modal dialog component.
The Dialog component is used to show dynamic HTML content which component in a container floating over the content box, this can be closed down by user action like clicking on the close icon. The dialog models are used to create a focused area on-screen generally used for data actions like Create, Update data or show alerts and confirmation.
The Angular Material UI library provides a number of components which can be used by importing the required APIs in the project modules. Material Dialog is provided by the MatDialogModule to creat dynamic Modals with custom components. The Dialog component provides number of configurations options which we’ll discuss in this post.
Here we will create a new Angular application then install Material UI library package to demonstrate how to add Angular Material Dialog in Application with options available also discuss on how we can pass data between the parent page and Dialog component.