CODEWITHSUNDEEP
angulardialogmat-dialog
Ravel Sbrissa Okada
Ravel Sbrissa Okada

Reputation: 129

Passing more than one property using @Inject MAT_DIALOG_DATA

This dialog is shared, I need to use it in different cases. What I'm trying is receiving different data when a component uses the dialog.

I can receive the first data correctly, but the 'data2' is the same that the 'data1'... is it possible using two "@Inject(MAT_DIALOG_DATA)"?

Dialog ctor (what I tried)

constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data1: ImportType[],
    @Inject(MAT_DIALOG_DATA) public data2: string[]) {
    this.imports = data1;
    this.fieldsToBeEdited = data2;
}

Mat-dialog config file

export class DialogConfig<D = any> implements MatDialogConfig {
    disableClose?: boolean;
    width?: string;
    height?: string;
    data1?: D | null;
    data2?: D | null;

    constructor(data1: any, data2?: string[]) {
        this.data1= data;
        this.data2= data2;
        this.disableClose = true;
        this.width = '40%';
        this.height = '60%';
    }
}

Open dialog method

 openDialog() {
    const dialogConfig = new DialogConfig(this.types, this.data);

    this.dialogConfig.open(DialogComponent, dialogConfig);
  }

Upvotes: 0

Views: 4940

Answers (1)

Caroline D.
Caroline D.

Reputation: 139

You can possibly use an encapsulating object to pass the data

constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData]) {
    this.imports = data.imports;
    this.fieldsToBeEdited = data.fieldsToBeEdited; }

export interface DialogData{
fieldsToBeEdited: any[,]
imports: any[]
}

Upvotes: 5

Related Questions