Components: MdDialog 'config.data' no longer exposed via MdDialogRef

[ggranum]

Bug, feature request, or proposal:

If the change was intentional, the bug is in the documentation for MdDialogConfig#data here[1]
If the change was not intentional then the bug is that there is no way to access the config data we pass via the MdDialog#open method.

What is the expected behavior?

I would expect to be able to provide data to a dialog that is about to open in a manner that is accessible at construction time.

What is the current behavior?

Have to use the solution discussed in https://github.com/angular/material2/issues/2003 if we want access to config data from within the dialog component.

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

From the docs, it seems like it was the intention for the config object to be exposed. Use case - avoiding duplication, early config, etc. It's not a shockingly big deal either way, but if it's not going to be added back then the documentation should be updated, and should indicate the approved way to pass such data. One could easily argue that a typed 'setConfiguration(...)' method on dialog component classes is better in practice anyway.

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

Beta 3, all OS/Browser

https://github.com/crisbeto/material2/commit/549222534c8cf2d2fdbd0f268aebb181159e2e51 removed the public field 'config:MdDialogConfig'.

[1] https://material.angular.io/components/component/dialog

[fxck]

https://github.com/angular/material2/pull/3971#issuecomment-292721991

[ggranum]

Thanks @fxck - Perhaps this can be marked as a documentation issue for adding some content around the MD_DIALOG_DATA token to the https://material.angular.io/components/component/dialog API Reference tab?

I did a pretty robust search of Issues and even went through the source to find when it was removed, and I had absolutely no idea that the token existed. Pretty sweet, but not super obvious :~)

[jelbourn]

Tracking via #3999

[tarnasky]

Here's an example of how to use MD_DIALOG_DATA if anyone is interested (also included in 3999):

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

@Component({
  selector: 'dialog-example',
  template: `
    <h1 md-dialog-title>Dialog Title</h1>
    <div md-dialog-content>
      Lorem ipsum dolor sit amet, consectetur adipscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna wiri aliqua. Ut enim ad minim ikad veniam, quis nostrud exceritatn ullamco laboris nisi ut aliquip.
    </div>
    <div md-dialog-actions>
      <button md-button class="dialog-button" (click)="dialogRef.close('Option 1')">OPTION 1</button>
      <button md-button class="dialog-button" (click)="dialogRef.close('Option 2')">OPTION 2</button>
    </div>`,
})
export class DialogExampleComponent {

  constructor(private dialogRef: MdDialogRef<DialogExampleComponent>,
              @Inject(MD_DIALOG_DATA) private data: any) {
    console.log(data);
  }
}

[kelsmj]

Please note, if you try and inject MD_DIALOG_DATA and you don't actually specify something for the data propery on the MdDialogConfig object, you will get

ERROR Error: No provider for Token MdDialogData!

It looks like the MD_DIALOG_DATA token is expected to be registered with the root injector, if data is empty.

[jelbourn]

@kelsmj can you file a separate issue for that? It shouldn't throw an error.

[isherwood]

@tarnasky, thanks for the example, but I can't seem to figure out how to include both a data object and a config object in the dialog.open function.

Here's a bit of what I'm working with. I'm migrating a component from ng1.5.x. How can I include config as an argument?

import { Component, Input, OnInit, Inject } from '@angular/core';
import {
    MdDialog,
    MdDialogRef,
    MD_DIALOG_DATA
} from '@angular/material';

    ...

        let config = {
            // animation: panelAnimation,
            hasBackdrop: false,
            panelClass: 'messaging-panel',
            // position: position,
            // trapFocus: true,
            // zIndex: 70,
            clickOutsideToClose: true,
            // focusOnOpen: true
        };

        let dialogRef = this.dialog.open(
            UserMessagingDialog,
            {
                data: {
                    'messages': this.messagesToShow,
                    'messageClasses': this.messageClasses,
                    'messageIcons': this.messageIcons,
                    // 'activeMessageType': this.activeMessageType
                }
            }
        );

        dialogRef.afterClosed().subscribe(result => {
            // angular.element('messaging .messaging-icon').removeClass('rotate-cw tinted');
        });
    }
}

@Component({
    selector: 'user-messaging-dialog',
    templateUrl: './user-messaging.dialog.html',
    styleUrls: ['./user-messaging.component.scss']
})
export class UserMessagingDialog {
    constructor(
        @Inject(MD_DIALOG_DATA)

        public data: any,
        public dialogRef: MdDialogRef<UserMessagingDialog>
    ) { }
}

[kelsmj]

@isherwood see the example code in this Plunk

[jelbourn]

Or the documentation:
https://material.angular.io/components/dialog/overview

[isherwood]

Neither that Plunk demo nor the docs (both of which I've studied) show how to pass data and a config object. I've tried a number of configurations and they all result in argument misalignment or other errors.

[willshowell]

@isherwood Take a look at the MdDialogConfig section of the api docs

https://plnkr.co/edit/zEul8QHeQPkwiDIrk7eA?p=preview

[isherwood]

@willshowell, thank you. That got me there. My misunderstanding was in thinking that data is another sibling argument, and not part of the config object. The AM docs may be complete for someone who has a firm grasp of TS and ng2+, but not if you're swallowing all three at once. :)

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