@input and @output in md-dialog component

[Christophe HOARAU]

Hi,

I'm on angular material 2 alpha 9-2 and I'm trying to understand how to use mdDialog. I managed to open the dialog but couldn't find out how to pass in parameters (@input) or how to handle event (@output).

Could anyone help me please ?

Thanks.

[Nikos Lykouropoulos]

Your custom dialog component is not present in any template (I assume) so you cannot use @Input and @Output.

In order to initialise variables of your dialog do something like this:

dialogRef: MdDialogRef<NodePropertiesDialog>;

constructor(public dialog: MdDialog) { }

openDialog() {
    this.dialogRef = this.dialog.open(CustomDialog, config);

    this.dialogRef.componentInstance.yourVariable = ... something ...;

    this.dialogRef.afterClosed().subscribe(result => {

      if (result !== undefined) {

        ... use the result ....

      }

      this.dialogRef = null;

    });
}

The result returned in the after-close event can be set like below from within your custom dialog:

dialogRef.close(labelInput.value);

use a constructor like the following in your custom dialog

yourVariable: any;

constructor(public dialogRef: MdDialogRef<NodePropertiesDialog>) {  }

Hope this help.

[Christophe HOARAU]

Hi,

Thanks, this seems to work but I suspect it's only a temporary workaround until it is better handled by mdDialog. I haven't done a lots of testing yet, but I'm a bit worry about breaking the initialization flow as I'm not sure if the open function is synchronous or async ?

Any way thanks a lot.