MdDialog passing in data and or variables to modal

[xtianus79]

Bug, feature request, or proposal:

Passing things into the second component seems obscure. I can't readily pass in values to the second component to display on modal popup.

What is the expected behavior?

When the modal popup is displayed... information such as variables will display accordingly {{data.here}}

What is the current behavior?

Not working

What are the steps to reproduce?

pass in variables to the new value
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/o077B6uEiiIgkC0S06dd
https://plnkr.co/edit/dhZ4UldIlQKDPvrjJP2f?p=preview <<< this is example from Material

    export class DialogResultExampleDialog {
        title: string = 'book';
      constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}

      public testFunction(errorMsg: string) {
        console.log('this is a test999999 ' + errorMsg);
      }

   }

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

To be able to pass in data / variables to the modal dialog popup upon request.

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

Angular 2.4.1

Is there anything else we should know?

[antonyRoberts]

There is a pull request to make it easier
feat(dialog): add a config option for passing in data

In the mean time #1377 (comment)

[crisbeto]

@antonyRoberts is right. I'll close this issue as a duplicate of #2181.

[xtianus79]

Hi @crisbeto and @antonyRoberts ... I have been working through it and I notice that the way the example API shows how to do the diaglog there is a 2 component system. *** I don't like this methodology... The issue with that is accessing the class to fire the modal popup is probably the same class that has the data you need to access too... not to say there aren't ways to get around this but the point is still a concern. So what I did is pointed it to the same class.

This works per se but now I can't set the data.

For example...

title: string = 'book';  i

this is fine but what if I want to access data... i.e.

title: any = this.someFunction(dataPassedIn);

^^^^^ I can't do this. perhaps I am doing something wrong but any help would be appreciated.

Should I post this in the other issue forum? #2181

***Update... to the above concern I wish the modal pop would accomplish these things:

1. the dialog modal popup should be able to be called from any component including in and of itself.
   (Component A calls component A and accesses data from Component A)
2. the dialog modal popup should be able to be called from another component while accessing data from a predeterminate component. (Component A calls component B and access Data from Component B)
3. the dialog modal popup should be able to be called from another component while accessing data from itself. (Component A calls component B and access Data from Component A)
4. the dialog modal popup should be able to be called from another component while accessing data from a predeterminate component and or itself. (Component A calls component B and access Data from Component A and or Component B)
5. the api should be precise and intuitive to use.

[crisbeto]

Not sure I get the issue @xtianus79. Can you post what your classes look like?

[xtianus79]

@crisbeto it is pretty straight forward...

export class ApiHelper {

selectedOption: any = this.openMessage();
messagetype: string;
name: string = 'paul';

constructor(
    private http: Http,
    public dialog: MdDialog,
    //public dialogRef: MdDialogRef<DialogResultExampleDialog>
) { }

openDialog(errorMsg: string) {
let dialogRef = this.dialog.open(ApiHelper);
this.selectedOption = 'test here';
let blue = this.openMessage(errorMsg);
console.log('three he is ' + errorMsg + ' >>>> ' + blue);
console.error('this is errorMsg22222 = ' + errorMsg);
dialogRef.afterClosed().subscribe(result => {
  this.messagetype = errorMsg;
  this.selectedOption = blue;
});

}

openMessage(errorMsg: string) {
  console.log('this is the open message9999 = ' + errorMsg)
  this.selectedOption = errorMsg;

  return this.selectedOption;

}

I would like for this >>>> selectedOption: any = this.openMessage(); to work but i get a typescript error that I am not matching in the function... i.e. errorMsg: string isn't being passed in...

[crisbeto]

Not sure where the openMessage comes from, but you're basically calling it in the constructor. In regards to getting a hold of the dialog instance, you can do that in the openDialog method with dialogRef.componentInstance.

[xtianus79]

@crisbeto you mean like dialogRef.ApiHelper ???

[crisbeto]

No, literally dialogRef.componentInstance.

[xtianus79]

MMMMMMMMM.... @crisbeto You SIR... ARE THE MAN!!!! lol. ughhh understanding API's always helps!

I appreciate your help that did the trick...

let blue = dialogRef.componentInstance.openMessage(errorMsg);  

I have to clean this up a lot but i will repost on plunkr to show what I did...

Again thanks!!

[angular-automatic-lock-bot]

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.}