Passing input values to Dialog Component [duplicate]

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>