Angular Material — Dialog

Following on from the previous article where we created a dialog that shows a message to the user. We will be updating the dialog to allow data to be passed into the dialog and also load data from a remote source.

In the customerDetail.component.ts file, at the top of the file where we previously imported MatDialog we also need to import MAT_DIALOG_DATA .

In the dialog component, ActivateCustomerConfirmComponent we need to inject the MAT_DIALOG_DATA token. To do this, in the constructor add-in

@Inject(MAT_DIALOG_DATA) public data: any;

This will allow us to pass in data and be able to access it within the dialog.

Get Mo Gold’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Within the main component, in the showDialog() method, we can change it to pass in the customer activation status as such. Adding any data we need via the data option.

showDialog() {
  this.dialogRef.open(ActivateCustomerConfirmComponent, data {activatedStatus: this.customer.activated});
}

Within the dialog template, we can change the HTML. Change the <p> element within the <mat-dialog-content> element to

<p>Customer activation status: {{data.activatedStatus}}</p>

When refreshing the page and opening the dialog, you will see that the activated status of the customer is showing.

We could also pass in the customer id and then get the activated status from the server and get any other information needed in the dialog.

In the next article, I will show you how to change the activation status within the dialog and pass back the change to the main component.

Cheers

Moshe