Components: Documentation is unclear about how to get data into a Dialog.

Created on 21 Nov 2016  路  10Comments  路  Source: angular/components

Bug, feature request, or proposal:

Documentation bug.

What is the expected behavior?

When I use the MdDialog service to open a dialog with some component, I'd love to be able to pass some configuration into that component.

What is the current behavior?

The dialogRef exposes componentInstance, which allows me to set properties / call functions on the component after construction, however I'm unsure if this is the recommended approach since it is not mentioned in the docs.

What are the steps to reproduce?

Read the docs at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md, and notice the example uses a "static" dialog.

What is the use-case or motivation for changing an existing behavior?

It would improve the documentation and reduce the number of future issues.

Which versions of Angular, Material, OS, browsers are affected?

Latest /all

Is there anything else we should know?

I can submit a PR for improved documentation of an answer from this threads provides sufficient information!

docs help wanted

Most helpful comment

I figured it out from another post:
use this when opening

let dialogRef = this.dialog.open(myModal);
dialogRef.componentInstance.data = myData;

use this in the modal

ngOnInit() {
    this.data = this.dialogRef.componentInstance.data;
}

All 10 comments

The dialogRef exposes componentInstance, which allows me to set properties / call functions on the component after construction, however I'm unsure if this is the recommended approach since it is not mentioned in the docs.

https://github.com/angular/material2/issues/1377#issuecomment-250632661

@SamMousa, as I see it's actually the only way to do it directly. You can use an injected service for that, but, IMHO, it would be an overkill.

I've added this to my todo list.

Is there any timeframe of when this will be added? if not could a code snippet be created here to show how to do it?

@tmburnell I'm currently no longer working on an angular related project so it's low on the list.

I figured it out from another post:
use this when opening

let dialogRef = this.dialog.open(myModal);
dialogRef.componentInstance.data = myData;

use this in the modal

ngOnInit() {
    this.data = this.dialogRef.componentInstance.data;
}

@SamMousa
I know in general components should share data (typically modeled data) with a service. (depending on what you're doing) But Yeah the docs dont really show how to pass data in, I'm getting a pr in for that.
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

@tmburnell this is the way I found it used in the source.
https://plnkr.co/edit/vpTaIAdIJnjd7ngFG2Ea?p=preview

I'm gonna close this since I no longer expect I'll be working on it in the foreseeable future.

@SamMousa I have a PR out for this, you were right about it being confusing. I'm trying to fix that in the docs.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

constantinlucian picture constantinlucian  路  3Comments

kara picture kara  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

jelbourn picture jelbourn  路  3Comments