Components: Add documentation for MD_DIALOG_DATA

[jelbourn]

Nothing in the overview references this.

[tarnasky]

Until the documentation can be added, I think it would be helpful to have an example on the usage of MD_DIALOG_DATA. Here is one I put together:

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

If you have any suggestions for improvement, please let me know.

[ronanamsterdam]

What would also be great is an example to test is)
Currently having:
No provider for Token MdDialogData!
when trying to run a test spec through angular cli + karma on similarly executed component with @Inject(MD_DIALOG_DATA)

[ronanamsterdam]

figured:

...
providers: [
        { provide: MD_DIALOG_DATA, useValue: "someAnyTypeObjectHereThatYouWillGetTheDataFrom"}
]

[crisbeto]

I'll close this one as a dupe of #1947. There's a merge-ready PR that will address it at #3907.

[sdushay]

Has anyone found an alternative for unit testing to @ronanamsterdam's mocked provider? Seems like it makes it very difficult to write unit tests that alter behavior based on data passed in to the MD_DIALOG_DATA service.

[dallastjames]

@ronanamsterdam You can mark dependencies as optional using @Optional() from the Angular core library. It just means that your constructor and component would need to handle the possibility of not having the dialog data (for example, in a unit test).

class MyComponent {
    private _injectedValue: any = null;

    constructor( @Optional() @Inject(MD_DIALOG_DATA) private _dialogData: any ) { 
        if(this._dialogData && this._dialogData.someValue) {
            this._injectedValue = this._dialogData.someValue;
        }
    }
}

Handling the dialog data like this means that in your unit tests you do not need to provide the MD_DIALOG_DATA for it to be able to run correctly. @sdushay This does mean that if you want to provide different values to your dialog component for testing purposes, you would could do something similar to the following:

describe('Component: MyComponent', () => {
    let component:MyComponent;
    let fixture:ComponentFixture<MyComponent>;
    let debugEl:DebugElement;
    let elem:HTMLElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                MyComponent
            ],
            imports: [ ],
            providers: [ ],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    afterEach(() => {
        fixture.destroy();
        component = null;
        debugEl = null;
        elem = null;
    });

    it(`is works when someValue is true`, () => {
        fixture.destroy()
        TestBed.resetTestingModule();
        TestBed.configureTestingModule({
            declarations: [
                MyComponent,
            ],
            imports: [ ],
            providers: [
                {
                    provide: MD_DIALOG_DATA,
                    useValue: {
                        someValue: true
                    }
                }
            ],
        }).compileComponents();
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        expect(component).toBeTruthy();
        expect(fixture).toBeTruthy();
    });
 });

The basic idea behind this is to tear down the instance of the component that was created in the beforeEach part of the tests and then rebuild a new component, injecting in the value for the optional dialog data that you want for the specific test. You could even use this same concept without the use of @Optional() where the base case is established in the default TestBed construction and the tests that need to modify the initial data passed in can implement something similar to this.

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