This example requires MdDialogRef
and MD_DIALOG_DATA
. Please import them in the component module.
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
input-overview-example.html:
<md-input-container>
<input mdInput
[(ngModel)]="id"
placeholder="Value passed to md-dialog">
</md-input-container>
<p></p>
<button md-raised-button
(click)="openDialog(id)">
Open Dialog
</button>
input-overview-example.ts:
import {Component, Inject, Input, OnInit } from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'input-overview-example',
templateUrl: 'input-overview-example.html'
})
export class InputOverviewExample {
id: any;
@Input() isChecked: boolean;
constructor(public dialog: MdDialog) {}
openDialog(value) {
let dialogRef = this.dialog.open(DialogResultExampleDialog, {
data: {
id: value
}
});
dialogRef.afterClosed().subscribe(result => {
console.log(result);
});
}
}
@Component({
selector: 'dialog-result-example-dialog',
template: `<p md-dialog-title>Confirm Toggle </p>
<p md-dialog-content>Id passed from component: {{ this.passedId }}</p>
<md-dialog-actions>
<button md-button color="primary" (click)="dialogRef.close('Cancel')">Cancel</button>
<button md-button color="primary" (click)="dialogRef.close('continue')">Continue</button>
</md-dialog-actions>
`,
})
export class DialogResultExampleDialog implements OnInit {
passedId: string;
constructor(@Inject(MD_DIALOG_DATA) private data: { id: string },
public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
ngOnInit(){
this.passedId = this.data.id;
}
}