Angular 8 - Get data to parent component from popup modal using emitevent

Question

I have an Angular 8 application that has a parent component that on button click displays a popup modal dialog. When I click the Save button on the popup dialog I want to send the selected object back to the parent component.

I believe the best way to do this is using EventEmitter. I have the emitter set in the modal dialog. But I can't get the data back to the parent. This is what I have... PARENT COMPONENT: HTML

 <mat-toolbar color="primary">
    <button
      mat-raised-button
      color="primary"
      id="mat-toolbar__get-rate-button-id"
      [disabled] = !triplegForm.valid
      (click) = "getRates($rateEvent)"
    >
      GET RATE
    </button>
  </mat-toolbar>

TS CODE

 getRates(rateEvent):void{
   let getRateDialog = this.getRateDialog.open(GetRatesComponent, {
      width: '95%',
      height: '80%'
    });

     getRateDialog.afterClosed().subscribe( result => {
       this.selectedRate = result
       console.log("returned from rate dialog: ", this.selectedRate.rateAmount);
     });
  }

POPUP MODAL HTML

<mat-toolbar>
    <button id="rateModalSave" mat-raised-button color="primary"
            [disabled]="!enableSaveButton()" (click)="saveRate()">SAVE
    </button>
  </mat-toolbar>

TS CODE

export class GetRatesComponent implements OnInit {
  selectedRate: Rate;
  constructor(private  rateService: RateService,
              private dialogRef: MatDialogRef<GetRatesComponent>) {
  }
  ...
 saveRate() {
   console.log("selected rate: ", this.selectedRate);
    this.rateSaved.emit(this.selectedRate);
     this.dialogRef.close();
  }
} 

So the selectedRate is set in the child component. But the this.selected.rateAmount in the logging statement in the parent is undefined.

After the rate is emitted from the child, I need to close the popup. But I don't see a

Answer 1

This is how I got it to work with help from answer above... I changed the getRate method in the parent to this: HTML:

 (click) = "getRates()"

The TS code is this in the parent:

 getRates():void{
   let getRateDialog = this.getRateDialog.open(GetRatesComponent, {
      width: '95%',
      height: '80%'
    });

   getRateDialog.componentInstance.rateSaved.subscribe((selectedRate) => {
         this.selectedRate = selectedRate;
         console.log("returned from rate dialog: ", this.selectedRate.rateAmount);
    });
  }

The modal code was correct.

Answer 2

you have to option:

1. use a service
   

2. mat dialog has this feature
   in dialog ts
   

       ...
         saveRate() {
         this.dialogRef.close({value: this.selectedRate});
       }
   

in parent component

        ....
        let dialogRef = dialog.open(UserProfileComponent, {
             height: '400px',
             width: '600px',
       });
       // here is your value
       dialogRef.afterClosed().subscribe(res => {
        console.log(res.value); // your value!
       });