How To send Object from parent to Matdialog

sai yaswanth reddy Leagala 0
Viewed 37

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

mat-dialog angular-material angular
2 Answers

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;
Sa E Chowdary0 
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
}
Rama K0
Related