title: Angular/aggrid: How to pass row data to form?(Material Dialog)
body: <p>I have data in the grid api, ag-grid. When I select a row and click the edit button, I would like for that row's data to be loaded into the correct form fields sot <a href="https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2">Example</a>, But I am confused how to how properly pass my data to the mat dialog. Here is my example. First I have a service that makes a put request and another service that posts the data:</p>
  
  <pre><code>editUser(employee: Employees) {
    return this.http.put(this._url + '/' + employee.id, httpOptions).pipe(
      map((res: Response) =&gt; res.json)
    )
  }
  
  saveUser(employee: Employees) {
    return this.http.post(this._url, employee, httpOptions).subscribe((res: any) =&gt; {
      res = employee
      this.componentMethodCallSource.next();
    })
  }
  </code></pre>
  
  <p>Then in my <code>table.component</code> class, I have the function for my button. This selects the row, calls the service, and opens the dialog.</p>
  
  <pre><code>editUser() {
    const selectRows = this.gridApi.getSelectedRows();
  
    const editSub = selectRows.map((rowToEdit) =&gt; {
      return this.service.editUser(rowToEdit);
    });
    this.openDialog(FormComponent)
  }
  </code></pre>
  
  <p>Here is where I am stuck, in my form class, I need to set a condition in my <code>ngoninit</code>. This condition determines if I call my <code>loadUser</code> function. Here, I try and use <code>MAT_DIALOG_DATA</code> to load the json id which would determine if <code>loadUsers()</code> should be called. But I cannot seem to access my id. I keep getting an error saying it is <code>undefined</code>.</p>
  
  <p><strong>Form Component</strong></p>
  
  <pre><code>employeeInfo: Employees;
  userId: number;
  
  constructor(
    public dialogRef: MatDialogRef&lt;FormComponent&gt;,
    private fb: FormBuilder, 
    private service: Service, 
    private http: HttpClient, 
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.userId = this.data.userId;
  }
  
  ngOnInit() {
    this.createUserForm();
    if (this.userId &gt; 0) {
      this.loadUser();
    }
  }
  
  createUserForm() {
    this.frmUser = this.fb.group({
      id: [],
      firstName: ["", [Validators.required]],
      lastName: ["", Validators.required],
    })
  }
  
  onSave() {
    this.employeeInfo = this.frmUser.getRawValue();
    this.employeeInfo.id = this.userId;
    this.service.saveUser(this.employeeInfo)
    this.dialogRef.close({
      success: 'success',
      data: {
        emp: this.employeeInfo.id
      }
    })
  }
  
  loadUser() {
    this.service.getData(this._url).subscribe((res: any) =&gt; {
      this.frmUser.patchValue({
        firstName: res.FirstName,
      })
    })
  }
  </code></pre>
  
  <p><strong>I am using the MatDialogRef for my form.</strong></p>
  
  <p>EDIT: Updated code. Unable to send data to the form still:
  TableComponent:</p>
  
  <pre><code>editUser(user) {
    const dialogRef = this.dialog.open(FormComponent, {
  
      width: '250px',
      data: user
    });
  
    dialogRef.afterClosed().subscribe(result =&gt; {
      this.user = user;
    });
  }
  </code></pre>
  
  <p>Form Component:</p>
  
  <pre><code>  constructor( public dialogRef: MatDialogRef&lt;FormComponent&gt;,
      private fb: FormBuilder, private service: Service, private http: HttpClient,  @Inject(MAT_DIALOG_DATA) public data: Employees) { 
      }
  </code></pre>