I am looking to dynamically pass the ID 59dc921ffedff606449abef5 to the MatDialog. Currently, I have hardcoded this ID for testing purposes.
Despite multiple attempts, I have been unable to successfully retrieve the ID dynamically for the function call. I even tried utilizing the @input feature without success.
edit-dialog.component.ts:
export class EditDialogComponent implements OnInit {
dialogResult:string = '';
constructor(public dialog:MatDialog, public loginService:LoginService ){ }
ngOnInit() {}
openDialog() {
this.dialog.open(EditUserComponent, { data: '59dc921ffedff606449abef5' })
.afterClosed()
.subscribe(result => this.dialogResult = result);
}
}
edit-user.component.ts:
export class EditUserComponent implements OnInit {
public message:any [];
public resData: {};
constructor(public thisDialogRef: MatDialogRef<EditUserComponent>,
@Inject(MAT_DIALOG_DATA) public data: number,
public loginService: LoginService) { }
ngOnInit() {
this.loginService.getSingleUser(this.data)
.subscribe(data => {
this.resData = JSON.stringify(data);
})
}
onCloseConfirm() {
this.thisDialogRef.close('Confirm');
}
onCloseCancel() {
this.thisDialogRef.close('Cancel');
}
}
The ID is retrieved from a JSON Response in the login-service.ts service:
getSingleUser(id) {
return this.http.get(environment.urlSingleUsers + '/' + id, this.options)
.map(res => {
console.log('RES: ' + JSON.stringify( res.json() ) );
return res.json();
}).catch( ( error: any) => Observable.throw(error.json().error || 'Server error') );
}
extractData(result:Response):DialogUserData[] {
return result.json().message.map(issue => {
return {
ID: issue._id,
Email: issue.email,
Name: issue.fullName
}
});
}
Below is where the openDialog() method is called:
<i class="material-icons" (click)="openDialog()">create</i>
For further clarification, here is an example of how the JSON Response appears:
"message": [
{
"_id": "59415f148911240fc812d393",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb1bab5bef5bfb4be9bbdb4b4f5bfbe">[email protected]</a>",
"fullName": "Jane Doe",
"__v": 0,
"created": "2017-06-14T16:06:44.457Z"
},
{
"_id": "5943b80be8b8b605686a67fb",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f993969197d79d969cb99f9696d79d9c">[email protected]</a>",
"fullName": "John Doe",
"__v": 0,
"created": "2017-06-16T10:50:51.180Z"
}
]