Passing Value Between Angular Components via a Function for Triggering Dialog Overlay

Question

In my Angular app, I have a component with a function that opens a dialog overlay. I am trying to figure out how to pass some data from the originating component to this dialog component (EnrollingProcessComponent). This is not a parent-child relationship, so I can't use Input() or [] binding here.

Also, because multiple instances could cause issues I won't get into here, we're not using a service to get and share data between components. So I can't inject a service to get the same instance in the dialog component (EnrollingProcessComponent) either.

So, all that said, I need to somehow pass this data (which is simply an email address) from the originating component to the dialog component. I assume I should be able to do this by passing it as a parameter, but so far I'm not able to get it to work (i.e., when I console out the value in the originating component, I get the value. But when consoling that value out in the dialog (EnrollingProcessComponent) component, I get 'undefined').

I use a click() event to open the dialog component:

<button *ngIf="canBeEnrolled()" md-menu-item 
(click)="onContactClicked()">
  <span class="md-menu-text">Initiate Contact</span>
</button>

And the function that's triggered looks like this:

public onContactClicked(primaryContactEmail): void {
    primaryContactEmail = this.getPrimaryContactEmail();
    console.log(this.getPrimaryContactEmail());
    console.log('onContactClicked engaged on: ' + new Date());
    // Create dialog
    let dialogRef: MdDialogRef<EnrollingProcessComponent>
        = this.dialog.open(EnrollingProcessComponent, {disableClose: true});
}

How can I pass the result of the getPrimaryContactEmail(), which is an email address, from the originating component to the component fired when the dialog opens?

Answer 1

You can pass values to the component instance via the data property of MdDialogConfig options like this:

primaryContactEmail = this.getPrimaryContactEmail();

let dialogRef: MdDialogRef<EnrollingProcessComponent>
    = this.dialog.open(EnrollingProcessComponent, {
            disableClose: true,
            data: { primaryContactEmail: primaryContactEmail }
        });

You would then need to inject MD_DIALOG_DATA into the component EnrollingProcessComponent component, which would allow you to access any passed data, in this case a property named primaryContactEmail:

import {MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'example-dialog',
  templateUrl: 'example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(
      public dialogRef: MdDialogRef<DialogResultExampleDialog>, 
      @Inject(MD_DIALOG_DATA) public data: any) {
      console.log(this.data);
      console.log(this.data.primaryContactEmail);
  }
}

Here is a plunker demonstrating the functionality. Check the console when you open the dialog to see the data being loggable.

If you need to pass the value back to the parent component you could use md-dialog-close or close() to pass the value back up.

I've added closing the dialog from within the component via close(value: any) and passing a value to the parent calling component. Ignore the initial errors on load, those were present on the base unaltered example.

Hopefully that helps!