Issue
I checked this link but I could not solve my problem.
I have a table on my page. When I double click each row, an Angular Materia Dialog is shown and the corresponding row data are loaded to that dialog. The followings are variable in the main ts
file:
eqId: string = '';
onDoubleClick(e: any): void {
this.eqId = e.rowData["EquipmentId"];
this.openDialog();
}
openDialog() {
const dialogRef = this.dialog.open(EquipmentDetailComponent);
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
The EquipmentDetailComponent
's ts
file is:
@Input() eqId: string = '';
But when I run, eqId
is empty in the dialog.
How can I pass data to Angular Material Dialog?
Solution
You can pass any data by providing a second parameter in the this.dialog.open()
method like this:
eqId: string = '';
onDoubleClick(e: any): void {
this.eqId = e.rowData["EquipmentId"];
this.openDialog();
}
openDialog() {
const dialogRef = this.dialog.open(EquipmentDetailComponent,
{eqId: this.eqId}
);
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
In the EquipmentDetailComponent
you should inject MAT_DIALOG_DATA
like this:
export class EquipmentDetailComponent {
...
constructor(@Optional() @Inject(MAT_DIALOG_DATA) public data: {eqId: string}){
//you can get an access to passed value like this
console.log(this.data.eqId);
}
...
}
Answered By - Dmitry S.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.