Configuring a Dialog
Explore how to configure Angular Material dialogs to accept and display dynamic data such as the current product price. Learn to use the MAT_DIALOG_DATA injection token to pass data into the dialog and MatDialogRef to programmatically return data to the caller component. This lesson helps you build reusable, interactive dialog components for Angular applications.
We'll cover the following...
We created a simple dialog for interacting with the user. We noticed that the input field for entering the new price was empty. In this lesson, we will learn how to pass data in the dialog and display the current price as a placeholder inside the input control.
In a real-world scenario, we will probably need to create a reusable component for displaying a dialog in an Angular project. Even better, the component may end up in an Angular library as a package. Therefore, we should configure the dialog component to accept data dynamically.
In the current Angular project, we’ll display the current price of the product when the user wants to change it using the price ...