Components: How to pass data to material dialog

[rtrompier]

Hi all,
Someone can provide me an example of Dialog with param please ?
Thanks a lot.

[fxck]

There is not an easy way, as the only thing dialog supports now is creating a new component you pass it... so the best thing you can do is to inject some service inside that component and get the data that way.

Once this is done https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.ts#L23 you'll probably be able to simply pass it an existing component with standard binding.. if you don't want to wait for it to happen, you can use this simple modal component I put together using material2 overlay/portal utils

https://gist.github.com/fxck/9ab983b80aca197ff22c29c0dfa6daf6

it's stateless(as I keep state of my modals inside https://github.com/ngrx/store) and works like this

  <cpt-modal
    [open]="addModalState$ | async"
    (close)="onModalClose$.next($event)">
    <!-- whatever you want here -->
    <md-card>
      <cpt-brand-form
        #brandFormRef
        [form]="form"
        [people]="internalPeople$ | async"
        (update)="onAdd$.next($event)">
      </cpt-brand-form>
    </md-card>
  </cpt-modal>

[crisbeto]

Have you tried the suggestion from here?

[rtrompier]

Thanks for your answers ;)
I will check.

[skined90]

Okay, I had a same problem but I found solution.

You can put inside your dialog.open() function

this.dialogRef.componentInstance.data = this.someDataObject;

And then inside your dialog component you can get the data:

this.data = this.dialogRef.componentInstance;

[rtrompier]

Yes it's work ;)
Thanks a lot guys.

Have a nice day.

[emeka-osuagwu]

i guys can i get an example code of this

[HopScotch47]

Check here: https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts

[stephengeorgewest]

That was a bit much to find all the pieces necessary to pass the data, and the newest version was missing some helpful type annotations (I looked at the version closest to the date of the previous comment). I'll sum up.

The dialog initiator opens the dialog and passes config(of type MdDialogConfig(found at the same location as the dialog definition)), with a property called data on it.

let config: MdDialogConfig = {
  disableClose: false,
  width: '',
  height: '',
  position: {
    top: '',
    bottom: '',
    left: '',
    right: ''
  },
  data: {
    /*put your data here*/
  }
};
this.dialogRef = this.dialog.open(JazzDialog, config);

and the dialog component gets the data injected into it's constructor.

constructor(
    public dialogRef: MdDialogRef<JazzDialog>,
    @Inject(MD_DIALOG_DATA) public data: any
) {
    data./*WHATEVER DATA YOU PASSED*/
}

I didn't like having the data be any (I like types), so I exported an interface from my dialog, and used that for the type of config.data instead of any.

[RichardBoyder]

how do i pass 2 formgroups with the data:{} into the dialog. i am able to pass 1 of them.... and if you change a formcontrol in the passed data does it retain the change when the dialog is closed ? to show in the component that opened the dialog?

[dushkostanoeski]

You can do something like:

{
    data: {
        form1: {
                 ...
        },
        form2: {
                 ...
        }
    }
}

And access the data using

this.data.form1
this.data.form2

[RichardBoyder]

excellent i will try that. thank you.

is the data 2 way bound , meaning if i change a value for example data.form1.controls(‘item’).patchvalue(‘test’)

that kind of code. would the data from the component we passed from change? or does the data inside the dialog not link to the original data?

On 27 Oct 2017, at 13:03, Dushko Stanoeski [e-mail] wrote:

You can do something like:

{
data: {
form1: {
...
},
form2: {
...
}
}
}
And access the data using

this.data.form1
this.data.form2
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/angular/material2/issues/2031#issuecomment-339941520, or mute the thread https://github.com/notifications/unsubscribe-auth/APRoAzCJs31pl4Kyjih_1TXwixK5tQ_Qks5swbiZgaJpZM4K_-uS.

[intellix]

Just looking into dialog and trying to understand why MAT_DIALOG_DATA exists when you have the componentInstance to pass in data via inputs, of which are type protected.

Did MAT_DIALOG_DATA come before or after the componentInstance? I've come from ng-bootstrap so am more inclined to use the componentInstance to pass in data but am wondering if it solves some other problem I don't know about yet

[angular-automatic-lock-bot[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._}