How to transfer data to angular material 2 dialog box

Question

I am using the corner material dialog 2 .

I want to pass data to an open component. This is how I open the dialog at the click of a button

let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, data :{'name':'Sunil'} }); 

There is a data property on the documentation page, but I checked the MdDialogConfig in my installed packages

 /** * Configuration for opening a modal dialog with the MdDialog service. */ export declare class MdDialogConfig { viewContainerRef?: ViewContainerRef; /** The ARIA role of the dialog element. */ role?: DialogRole; /** Whether the user can use escape or clicking outside to close a modal. */ disableClose?: boolean; /** Width of the dialog. */ width?: string; /** Height of the dialog. */ height?: string; /** Position overrides. */ position?: DialogPosition; } 

there is no data property in the configuration class.

Now, how can I access this transferred data?

Answer 1

UPDATE 2 (Corner 5+)

This answer is pretty outdated. Take a look at the epiphanatic response .

UPDATE

You can use dialogRef.componentInstance.myProperty = 'some data' to set the data for your component.

You need something like this:

 let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, }); dialogRef.componentInstance.name = 'Sunil'; 

Then in your DialogComponent you need to add name property :

 ... @Component({ ... }) export class DialogComponent { public name: string; ... } 

The text below is not valid in new versions of @ angular / material

I did not find any documentation on this, so I also started to study the source code. Because of this, this cannot be an official way to do it.

I successfully dialogRef._containerInstance.dialogConfig.data data in dialogRef._containerInstance.dialogConfig.data ;

So what you can do, for example,

 let name = dialogRef._containerInstance.dialogConfig.data.name; console.log(name); // Sunil 

Answer 2

For the newest version of the dialog ( this is before Angular 5, for 5 see Update below) , you can do the following to transfer data through a configuration that is much simpler and cleaner.

When you open the dialog box, you can do it as follows by adding data as a configuration parameter (just ignore the width and height, which are for illustration purposes):

 this.dialogRef = this.dialog.open(someComponent, { width: 330px, height: 400px, data: { dataKey: yourData } }); 

Then, in the component that opens in the dialog box, you can access it as follows:

 import {MD_DIALOG_DATA} from '@angular/material'; import { Inject } from '@angular/core'; constructor( @Inject(MD_DIALOG_DATA) public data: any ) { } ngOnInit() { // will log the entire data object console.log(this.data) } 

Or you can use access to it in a template or other methods, but you get the point.

UPDATE for Angular 5

Everything in the material has been changed from Md to Mat, so if on Angular 5, import as:

 import {MAT_DIALOG_DATA} from '@angular/material' 

Then pour

 @Inject(MAT_DIALOG_DATA) public data: any 

Answer 3

I thought that I could give a more complete answer to those of us who are still studying:

Unlike sample materials, I configured the dialog box to have my own component files (html, css and ts) for ease of debugging.

The main component file "x.component.ts" (dialog box invocation)

1) add an import statement

 import { MatDialog} from '@angular/material'; 

2) add property to constructor parameters

 public dialog: MatDialog 

3) define the code to call the dialog box

  openDialog(title: string, text: string): void { const dialogRef = this.dialog.open(DialogComponent, { width: '350px', data: {dialogTitle: title, dialogText: text} ); dialogRef.afterClosed().subscribe(result => { }); const dialogSubmitSubscription = dialogRef.componentInstance.submitClicked.subscribe(result => { dialogSubmitSubscription.unsubscribe(); }); 

}

Call a function from your html file using openDialog (). I refer to DialogComponent, so make sure it is imported into your module.

 import { DialogComponent } from './dialog/dialog.component'; 

also

 entryComponents: [DialogComponent] 

declare this in your entryComponents array

4) add import in your dialog.component.ts file

 import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; 

5) define properties & functions

 dialogTitle: string; dialogText: string; @Output() submitClicked = new EventEmitter<any>(); constructor( public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {} ngOnInit() { this.dialogTitle = this.data.dialogTitle; this.dialogText = this.data.dialogText; } saveMessage() { const data = 'Your data'; this.submitClicked.emit(data); this.dialogRef.close(); } closeDialog() { this.dialogRef.close(); } 

6) and finally HTML

 <h1 mat-dialog-title>{{dialogTitle}}"</h1> <div mat-dialog-content> <p>{{dialogText}}</p> </div> <div mat-dialog-actions> <button mat-button (click)="saveMessage()" >Ok</button> <button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button> </div> 

Hope this helps.

Answer 4

So I added a method and it works on one component, but if I want to create a dialog box (another component), it does not work

table component and delete button

  openDeleteDialog(user) { this.dialog.open(DeleteUserDialogComponent, { width: '30%', disableClose: true, data: user }); } 

Component Dialog Box

 export class DeleteUserDialogComponent { dataSource = new MatTableDataSource(); constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {} deleteUser() { this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1); this.dataSource.data = [...this.dataSource.data]; console.log(this.dataSource.data); console.log(this.data) } click(): void { this.dialogRef.close(); } }