Passing input values to Dialog Component [duplicate]

Question

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);

Statism

Please post your code – Jackdaw

@Jackdaw Added the code – Statism

Check #34206093 See step 8 – Jackdaw

Thanks @yurzui, We had a discussion over there as well. I totally missed it. – Statism

Answer 1

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>

Alek

thank for this. I needed to pass the parameters before initializing the component. There is another thread for this, #40648752 – Unstoppable

Worked perfectly bro, cheers – Induction