How can I pass a service variable into an Angular Material dialog?

Question

For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?

Answer 1

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>) { }
}

Answer 2

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

Answer 3

From the official docs found on https://material.angular.io/components/dialog/overview

Sharing data with the Dialog component.

If you want to share data with your dialog, you can use the data option to pass information to the dialog component.

let dialogRef = dialog.open(YourDialog, {
  data: 'your data',
});

To access the data in your dialog component, you have to use the MD_DIALOG_DATA injection token:

import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data }}',
})

export class YourDialog {
  constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}

Answer 4

Here's how I did it.

pizza.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class PizzaService {
    getTopping(): string {
        return "Mushrooms"
    }
}

pizzaDialog.component.ts

import { Component } from '@angular/core';
import { MdDialogRef} from '@angular/material';
import {PizzaService} from './pizza.service';

@Component({
    selector: 'pizza-dialog',
    template: `{{pizzaTopping}}
    <button type="button" (click)="dialogRef.close('yes')">Yes</button>
    <button type="button" (click)="dialogRef.close('no')">No</button>
  `,
    providers: [PizzaService]
})
export class PizzaDialog {
    pizzaTopping: string;

    constructor(public dialogRef: MdDialogRef<PizzaDialog>, private pizzaService: PizzaService) { };

    ngOnInit(): void {
        this.pizzaTopping = this.pizzaService.getTopping()
    }
}

Answer 5

To give an updated answer to accommodate for the update from 'Md' to 'Mat':

• This assumes you already have a dialog successfully implemented and are now just looking to add an input
• This is the solution when you are having an issue that @angular/material has no exported member 'MD_DIALOG_DATA'

To open the dialog with data, pass in a data object:

this.dialog.open(YourComponent, {
  data: {
    anyProperty: "myValue"
  }
});

To retrieve that data in your dialog:

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

export class YourDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<YourDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {

    console.log('data passed in is:', this.data);
  }
}