Angular 7 Material dialog config data inject name conflict

Question

I'm trying to pass some data when opening a material dialog panel. The following example is what I learned from here

Sharing data with the Dialog component.

If you want to share data with your dialog, you can use the data option to pass information to the dialog component.

let dialogRef = dialog.open(YourDialog, {
  data: { name: 'austin' },
});

To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token:

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  data: any[] = []; // existing code, conflict
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

Now the problem is in the dialog component, there has been already a variable data defined and used. And the variable name data being passed into the dialog as config is dictated by Angular Material Dialog. So it causes a naming conflict. I could change the existing data variable to something else to give way to the Angular injected data, but is there a way to change the injected data to be something else? Thanks.

Igor Igor · Accepted Answer · 2019-03-07T19:21:27

You do not have to keep the same variable names.

constructor(@Inject(MAT_DIALOG_DATA) public anyOtherNameHereIsOk: any) { }

Why this works is that the parameter is already being decorated with @Inject(MAT_DIALOG_DATA) so the actual name of the parameter does not matter. Use a name that works best given the type of data and how it is used (and any other naming rules you might be accustomed to).

Stackblitz, see class DialogDataExampleDialog

Angular 7 Material dialog config data inject name conflict

Sharing data with the Dialog component.

1 Answers