Menu
For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?
874
You can pass any kind of data to the component by adding data to the MatDialog's open() options. }, }); You can retrieve the data by injecting MAT_DIALOG_DATA in the opened component.
MatDialog creates modal dialogs that implements the ARIA role="dialog" pattern by default. You can change the dialog's role to alertdialog via MatDialogConfig . You should provide an accessible label to this root dialog element by setting the ariaLabel or ariaLabelledBy properties of MatDialogConfig .
In order to use the Angular Material Dialog, we will first need to import MatDialogModule: ... ... ... Notice also CourseDialogComponent, this component will be the body of our custom dialog.
For the newest version of dialog ( This is prior to Angular 5, for 5 see update below), you can do the following to pass data via the config which is much simpler and cleaner. When you open the dialog, you can do it this way by adding data as a config param (just ignore the width and height which is there for illustration purposes):
I would show you several way you can pass variables from one component to another in Angular. We would cover the following; 1. Setup the Environment First create a new Angular app. I call it variabledemo. Remember to add routing Create the parent component. Add the parent route Create the child component.
How To Create An Angular Service And Access It In Multiple Components Scaffold Command Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my new-pipe Service ng g service my new-service 4 more rows ...
For passing variables you can grab the instance of the component opened in the dialog, from the MdDialogRef instance returned in the MdDialog.open() method call.
dialogRef = this.dialog.open(PizzaDialog, config) dialogRef.componentInstance.<property_name> Modified Pizza from the github material2 docs angular material doc
@Component({ selector: 'pizza-component', template: ` <button type="button" (click)="openDialog()">Open dialog</button> ` }) export class PizzaComponent { constructor(public dialog: MdDialog) { } openDialog() { let config = new MdDialogConfig(); let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config); dialogRef.componentInstance.name = "Ham and Pineapple"; dialogRef.componentInstance.size = "Large"; } } @Component({ selector: 'pizza-dialog', template: ` <h2>{{name}}</h2> <p>Size: {{size}}</p> <button type="button" (click)="dialogRef.close('yes')">Yes</button> <button type="button" (click)="dialogRef.close('no')">No</button> ` }) export class PizzaDialog { name:string; size:string; constructor(public dialogRef: MdDialogRef<PizzaDialog>) { } } Material2 beta.2
The dialog.open() function takes a 2nd parameter config (MdDialogConfig) where you can specify any data object.
this.dialog.open(YourComponent, { data: { anyProperty: "myValue" } }); You can then just retrieve this object from the component that is being used for your dialog window.
export class YourDialogComponent { constructor(public dialogRef: MdDialogRef<YourComponent>) { console.log('data', this.dialogRef.config.data); } } UPDATE: beta.3
The answer above works for the version 2.0.0-beta.2 of Material2. If you are using 2.0.0-beta.3, the config property was removed from MdDialogRef. you can instead inject that value using the MD_DIALOG_DATA of the opened component.
New import statements
import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material'; OPEN DIALOG
this.dialog.open(YourComponent, { data: { anyProperty: "myValue" } }); RETRIEVE DATA FROM DialogRef component
export class YourDialogComponent { constructor( public dialogRef: MdDialogRef<YourDialogComponent>, @Inject(MD_DIALOG_DATA) public data: any) { console.log('data', this.data); } } 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
