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?

you could emit an event from the originating component, have the parent component of the two components grab it, and then pass the data back down — Kai, Jul 14 '17 at 18:03
It's not a parent-child relationship, so that won't work here. — Muirik, Jul 14 '17 at 18:04
I understand that, but presumably both components are composed into another component — Kai, Jul 14 '17 at 18:06
I mentioned already that I can't because of architectural decisions that were already made. There is no shared service available. Hence my question to begin with. All detailed above. — Muirik, Jul 14 '17 at 19:20
I get that, but your argument is that you don't want multiple instance of the service, whereas you could simply have a static class ( non-injectable) and simply import it and use it — Milad, Jul 14 '17 at 19:28
Or, you could also give your modal overlay an option to be able to pass some argument ( data ) to the modal and the modal would pass that data to the instanstiated component (EnrollingProcessComponent) — Milad, Jul 14 '17 at 19:30
It's this second option that interests me. What would that look like? — Muirik, Jul 14 '17 at 19:48

Alexander Staroselsky · Accepted Answer · 2017-07-14T20:00:30.587

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!

That's exactly what I was looking for. Thanks! – Muirik Jul 14 '17 at 19:59 — Muirik, Jul 14 '17 at 19:59

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

1 Answers1