Configuring a Dialog

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 dialog:

1. Open the price.component.ts file and import MAT_DIALOG_DATA from the @angular/material/dialog namespace and Inject from the @angular/core library: