How to pass JSON Response from service to MatDialog Window'?

Question

I have a service where I execute a Http Request to fetch User data per ID... works fine.

In the other hand I do have a MatDialoge where I need to display the JSON Response Data coming from the service. The background for the process is to provide a possibility in the MatDialoge to edit User Data, make changes, update and at the end execute another Http Request to update the user and close the dialog. It means I would use a submit button inside MatDialog to send the edited User/Employee Data.

My first issue I'am facing now is how do I pass the data coming from 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 to execute and bind the button for 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 would like to display JSON Data Response and edit them. 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-dilog.component.html:

<mat-card-content>
   <mat-button-group>
       <i class="material-icons" (click)="openDialog()">create</i>
   </mat-button-group>
</mat-card-content>

Answer 1

1. Fetch JSON then open dialog

   openDialog() {
       this.loginService.getSingleUser('59dc921ffedff606449abef5')
           .map(data => {
               return this.dialog.open(EditUserComponent, { data: data }).afterClosed();
           }).subscribe(result => this.dialogResult = result);
   }
   

-- or --

2. Open dialog immediately

    openDialog() {
       let request = this.loginService.getSingleUser('59dc921ffedff606449abef5');
       this.dialog.open(EditUserComponent, { data: request })
           .afterClosed()
           .subscribe(result => this.dialogResult = result);
   }
   

   then in dialog component:

   constructor(
       public thisDialogRef: MatDialogRef<EditUserComponent>,
       @Inject(MAT_DIALOG_DATA) public data: Observable<any>) { }
   
   ngOninit() {
       this.data.subscribe(data => /* do stuff */);
   }
   

-- even better --

3. inject service into dialog

    openDialog() {
       this.dialog.open(EditUserComponent, { data: '59dc921ffedff606449abef5' })
           .afterClosed()
           .subscribe(result => this.dialogResult = result);
   }
   

   then in dialog component:

   constructor(
       public thisDialogRef: MatDialogRef<EditUserComponent>,
       @Inject(MAT_DIALOG_DATA) public data: string,
       public loginService: LoginService) { }
   
   ngOninit() {
       this.loginService.getSingleUser(data)
           .subscribe(data => /* do stuff */);
   }
   

https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-