Mat-Dialog Passing Array and Populate It Angular

Issue

So here is my question I will input a value in the QTY text field. Mat dialog will pop up that shows the number of quantities that I inputted. How do you iterate an object/data in afterclosed? and populate it to the setItem? I get the result, but it won't iterate it pass to the setItem how to do it? this is what I did so far

https://stackblitz.com/edit/mat-dialog-example-2akxdg

updated: i can get the qty, but i can't get what i input in mat-dialog

Solution

Actually, you are not sending your data from mat-dialog when it is closed.

in the alter-dialog.component.ts file you're just sending qty on save()

//your method which is not sending the required data
save() {
    this.dialogRef.close(this.data.qty);
  }

you need to send your inputted data too, like this

//save method that is returning required data
save() {
    this.dialogRef.close(this.fg.value);
    //fg is your form, it has qty too, so no need to send qty separately
  }

in app.component.ts you need to iterate properly afterclose, result itself is not an array, actually, it is an object. displayArray is the actual array that is present in the result object. you need to iterate like this

dialogRef.afterClosed().subscribe((result) => {
      console.log('qty' + result.qty);
      for (let i = 0; i < result.displayArray.length; i++) {
        this.setItem.push(this.CreatesetItem(result.displayArray[i].MoreItem));
      }
    });

click here to see Stackblitz example with your expected answer

Answered By - Exception