How To send Object from parent to Matdialog-CodePudding

I am doing an project in which I should send data from the parent component to MatDialog Component ,I can do this

data:{ name:this.options[2].name, costs:this.options[2].cost, }

but I am using Ngfor the component so I need to send which one I am selecting and send only that data

CodePudding user response：

First You need to collect selection data in your parent component before opening the dialog, after that you can pass the data like below

this.matDialog.open(YourComponent, {
      "width": '6000px',
      "maxHeight": '90vh',
       data: Your selected data,
      "autoFocus": false
    });

Reciving data can be like this

constructor(@Inject(MAT_DIALOG_DATA) public data: any)

and you can access that in side constructor or any method like

this.yourvaribale= this.data;

CodePudding user response：

We can use MatDialogConfig at Parent component.ts 

import {MatDialog, MatDialogConfig} from '@angular/material/dialog';

export class userComponent implements OnInit {
    dialogConfig = new MatDialogConfig()
    dialog: MatDialog

   // Now at EventHandler Method let say opneDialog()
   openDialog()
       {
           this.dialogConfig.data ={you Json object Data}
           this.dialog.opend(<<you Component>>, this.dialogConfig)
       } 

}

At child component 

constructor inject MAT_DIALOG_DATA
constructor(
      @Inject(MAT_DIALOG_DATA) public data : any 
)

we can collect data at ngOnInit()

ngOnInit()
{                                
  this.dataVariable = this.data
}