Passing a value between Angular Components via a function to overlay trigger dialogs
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 original component to this dialog component (EnrollingProcessComponent). It is not a parent-child relationship, so I cannot use the Input () or [] binding.
Also, since multiple instances can cause problems that I won't go into, we don't use a service to receive and exchange data between components. So I cannot inject the service to get the same instance in the dialog component (EnrollingProcessComponent).
So all that said, I need to somehow pass this data (it's just an email address) from the original component to the dialog component. I suppose I can do this by passing it as a parameter, but so far I can't get it to work (i.e. when I console the value in the original component, I get the value. By consoling this value in the dialog component (EnrollingProcessComponent), I get 'undefined').
I am using the click () event to open a dialog component:
<button *ngIf="canBeEnrolled()" md-menu-item
(click)="onContactClicked()">
<span class="md-menu-text">Initiate Contact</span>
</button>
And the called function 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 do I pass the result of getPrimaryContactEmail (), which is the email address, from the original component to the component that is launched when the dialog is opened?
You can pass values to a component instance via a data
parameter property MdDialogConfig
, for example:
primaryContactEmail = this.getPrimaryContactEmail();
let dialogRef: MdDialogRef<EnrollingProcessComponent>
= this.dialog.open(EnrollingProcessComponent, {
disableClose: true,
data: { primaryContactEmail: primaryContactEmail }
});
Then you need to inject MD_DIALOG_DATA into the component EnrollingProcessComponent
, which will 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 that can be logged.
If you need to pass a value back to the parent component, you can use md-dialog-close
or close()
to return the value.
I added closing the dialog from the component via close(value: any)
and passing the value to the parent calling component. Ignore the initial boot errors that were present in the base unmodified example.
Hope this helps!