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?

Puisne

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

Satirize

Hihi, Thank you very much! I just tried out your solution with latest Angular release, this line got compilation error: dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config); I fixed it like this: let dialogRef: MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config); – Geier

I think the answer from ThiagoPXP (MdDialogConfig data object) is really good and a better way to pass data into the child component and then setting the child class variables in the constructor, see below – Satirize

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

Carbamate

This looks like a recommended way. But why should it be preferred over using dialogRef.componentInstance? – Guttate

On my point of view, it's about "separation of concerns". The component that is opening the dialog should not know how the dialog works internally. Hence, it should not set any of the dialog's properties directly. The dialog can, more predictably, initiate itself with all required data in its constructor. – Carbamate

@Carbamate : is beta3 means it's both directional data binding ? – Gamali

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

Megen

Thanks! But what's disadvantage of using dialogRef.componentInstance instead? – Guttate

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

Bookerbookie

answers the question , -how to call a service in a dialog, thanks , exactly what i was looking for – Expositor

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

Westland