I have a service that handles Http Requests to fetch User data by ID, and it's working fine.
On the other hand, I have a MatDialog where I need to display the JSON Response Data received from the service. The purpose of this process is to allow editing of User Data within the MatDialog, making changes, updating the data, and then triggering another Http Request to update the user before closing the dialog. This would involve using a submit button inside the MatDialog to send the edited User/Employee Data.
The first issue I'm currently facing is how to pass the data from the Response to the MatDialog?
login.service.ts:
getSingleUser(id) {
let obsSingleUsersRequest = this.http.get(environment.urlSingleUsers + '/' + id, this.options)
.map(res => {
return res.json();
}).catch( ( error: any) => Observable.throw(error.json().error || 'Server error') );
return obsSingleUsersRequest;
}
The component responsible for executing and binding the button for the MatDilog
edit-dialog.component.ts:
import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from "@angular/forms";
import { MatDialog, MatDialogRef } from '@angular/material';
import { EditUserComponent } from './edit-user/edit-user.component';
import { LoginService } from '../../_service/index';
@Component({
selector: 'app-edit-dialog',
templateUrl: './edit-dialog.component.html',
styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {
dialogResult:string = '';
constructor(public dialog:MatDialog, public loginService:LoginService) {}
ngOnInit() {}
openDialog() {
let dialogRef = this.dialog.open(EditUserComponent, {
width: '600px'
});
this.loginService.getSingleUser('59dc921ffedff606449abef5')
.subscribe((res) => {
console.log('User Data EDIT DIALOG: ' + JSON.stringify(res) );
},
(err) => {
err;
console.log('IN COMPONENT: ' + err);
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog closed: ${result}`);
this.dialogResult = result;
})
}
}
The Dialog Window component where I intend to display the JSON Data Response for editing purposes. edit-user.component.ts:
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { LoginService } from '../../../_service/index';
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {
constructor(
public thisDialogRef: MatDialogRef<EditUserComponent>,
@Inject(MAT_DIALOG_DATA) public data: string) { }
ngOnInit() {}
onCloseConfirm() {
this.thisDialogRef.close('Confirm');
}
onCloseCancel() {
this.thisDialogRef.close('Cancel');
}
}
edit-dialog.component.html:
<mat-card-content>
<mat-button-group>
<i class="material-icons" (click)="openDialog()">create</i>
</mat-button-group>
</mat-card-content>