I am implementing the dialog component of material2 and faced this issue:
I want to make a generic dialog for all the confirmation type of messages, where developer can input the text to the dialog as per the business requirement. But as per the docs there are no such provisions. Do we have a work around for the same, or I should post it as a feature request on github?
export class ConfirmationDialogComponent implements OnInit { @Input() confirmationText: string; @Input() confirmationTitle: string; @Input() confirmationActions: [string, string][] = []; constructor(public dialogRef: MdDialogRef<ConfirmationDialogComponent>) {} ngOnInit() {} }
Calling like this:
let dialogRef = this.dialog.open(ConfirmationDialogComponent);
open will give you the component instance , means you can inject what ever you want to it like this :
openDialog() { let dialogRef = this.dialog.open(DialogOverviewExampleDialog); let instance = dialogRef.componentInstance; instance.text = "This text can be used inside DialogOverviewExampleDialog template "; console.log('dialogRef',dialogRef); }
Then obviously inside the DialogOverviewExampleDialog template you can do :
this is the text {{text }}
Plunker
What I would normally do, I'd create a configuration object which my Component understands and then I'll pass this when opening the modal :
private config = { title :"Hello there ", text :"What else ? " }; openDialog() { let dialogRef = this.dialog.open(DialogOverviewExampleDialog); let instance = dialogRef.componentInstance; instance.config = this.config; console.log('dialogRef',dialogRef); }
And then inside the modal component :
<div class="my-modal"> <h1>{{config.title}}</h1> <p>{{config.text}}</p> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With