Angular Material Dialog - Sending data to dialog

Question

I'm trying to use the same MAT DIALOG for both create client and edit client. I can get the create side going fine but for some reason I'm losing my mind on something that should be very easy. In the EDIT open dialog method I'm calling a service to get the client by ID, then adding that to the dialogConfig object as the second parameter of the open function. If I console log that dialog Config in the component that calls the open method I can see data has been appended to it, but in the dialog component, when picking up that data, I get NULL. For the life of me I can get data into that component.

I've used

dialogConfig.data = client --and-- dialogConfig.data = { client: client }

both return NULL

----- CALLING COMPONENT

editClientDialog(id: string) {
    // Create a dialog config object
    const dialogConfig = new MatDialogConfig();

    // Stop user from closing dialog by clicking elsewhere
    dialogConfig.disableClose = true;

    // Get client information from API
    this._clientService.getClient(id).subscribe((response) => {
      let client = response["client"];
      dialogConfig.data = client;
    });

    // Open dialog and also create reference to use for returned data
    let dialogRef = this.dialog.open(ClientDialogComponent, dialogConfig);

    // Returned data from dialog
    dialogRef.afterClosed().subscribe((result) => {
      if (result == undefined) {
        return;
      }
      console.log("AFTER CLOSED", result);
      // this._clientService.addClient(result).subscribe((response) => {
      //   console.log("Response", response);
      //   this.getClients();
      // });
    });
  }

--- DIALOG COMPONENT

import { Component, OnInit, Inject, AfterViewInit } from "@angular/core";
import { ClientService } from "../../../core/services/client.service";
import {
  FormBuilder,
  FormGroup,
  Validators,
  FormControl,
} from "@angular/forms";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { Client } from "src/app/core/models/client.interface";

@Component({
  templateUrl: "./client-dialog.component.html",
  styleUrls: ["./client-dialog.component.css"],
})
export class ClientDialogComponent implements OnInit {
  // Properties
  clientForm: FormGroup;
  submitted = false;
  client;

  constructor(
    public clientService: ClientService,
    private _fb: FormBuilder,
    private dialogRef: MatDialogRef<ClientDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    console.log("IN CONSTRUCTOR", data);   <------- this value of data is NULL
  }

  ngOnInit() {
    this.buildClientForm();
    if (this.client !== undefined) {
      this.patchForm(this.client);
    }
  }

  buildClientForm() {
    this.clientForm = this._fb.group({
      individualAsBusiness: new FormControl(false),
      name: [null, [Validators.required]],
      email: [null, Validators.email],
      phone: [
        null,
        [
          Validators.minLength(10),
          Validators.maxLength(10),
          Validators.pattern("^[0-9]*$"),
        ],
      ],
      website: null,
      address: this._fb.group({
        street: null,
        city: null,
        state: null,
        zip: null,
      }),
    });
  }

  patchForm(client) {
    this.clientForm.patchValue(client);
  }

  save() {
    this.dialogRef.close(this.clientForm.value);
  }

  close() {
    this.dialogRef.close();
  }

  // Form getters
  get name() {
    return this.clientForm.get("name");
  }

  get email() {
    return this.clientForm.get("email");
  }

  get phone() {
    return this.clientForm.get("phone");
  }

  get website() {
    return this.clientForm.get("website");
  }

  get address() {
    return this.clientForm.get("address");
  }
}

cabesuon · Accepted Answer · 2020-06-01 00:30:24Z

3

I think the problem is that the dialog is opening before you retrieve the client data. You should open the dialog after retrieving the data, something like this,

this._clientService.getClient(id).subscribe((response) => {
    let client = response["client"];
    dialogConfig.data = client;

    // Open dialog and also create reference to use for returned data
    let dialogRef = this.dialog.open(ClientDialogComponent, dialogConfig);

    // Returned data from dialog
    dialogRef.afterClosed().subscribe((result) => {
        if (result == undefined) {
            return;
        }
        // ...
    });
});

answered Jun 1, 2020 at 0:30

cabesuon

5,2782 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Varela Over a year ago

Thanks. That helped. Couldn’t figure it out at first

cabesuon Over a year ago

Glad it helps you!

Collectives™ on Stack Overflow

Angular Material Dialog - Sending data to dialog

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related