transfer data from one component to another angular

Question

I have component A which fires MatDialog

  openDialog(): void {
   // console.log('The dialog was opened');

    const dialogRef = this.dialog.open(PicuploadComponent, {
      width: '1000px',
      //data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
// I want to get data from upload response here! **res**
    });
  }

This component fires PicuploadComponent where I upload image and receive response with some data

onUpload() {
  const fd = new FormData(); 
  fd.append('image', this.selectedFile);
  this.service.uploadImage(fd).subscribe(
    (res:any)=>
    {
      console.log(res) ;
      this.dialogRef.close();
    },    
  );
}

I already described this in my answer to your previous question... https://stackoverflow.com/a/57822253/2352314 — Mark, Sep 06 '19 at 13:49
This is a duplicate question! see: https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2 — mojtaba ramezani, Sep 06 '19 at 13:55

score 1 · Accepted Answer · answered Sep 06 '19 at 13:46

1

Try this in PicuploadComponent:

this.dialogRef.close(res);

access to res in component A:

dialogRef.afterClosed().subscribe(result => {
  console.log(result)
});

answered Sep 06 '19 at 13:46

mojtaba ramezani

1,461
16
15

score 1 · Answer 2 · answered Sep 06 '19 at 13:49

when you close dialog.

this.dialogRef.close({data:'data'});

When dialog completely closed then.

let dialogRef = this.dialog.open(PicuploadComponent, dialogConfig).afterClosed()
  .subscribe(response => {
    console.log(response);
  });

Let me know If you have any query. Thanks.

score 0 · Answer 3 · answered Sep 06 '19 at 13:50

0

You should be passing the result from your uploadImage call to the this.dialogRef.close() method. Please see the example in their documentation, https://material.angular.io/components/dialog/overview

answered Sep 06 '19 at 13:50

observingstream

466
3
8

transfer data from one component to another angular

3 Answers3