Angular Material - Initialize md dialog with data passed from parent component in angular material2 - Angular Material Tutorial

This example requires MdDialogRef and MD_DIALOG_DATA. Please import them in the component module.

import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
<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>

import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
<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>
  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;  
  }
}

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap