title: Unit test Angular Material Dialog - How to include MAT_DIALOG_DATA
body: <p>I am trying to unit test this material dialog to test if the template is rendering the right injected object. The component works fine when used properly</p>
  
  <p>Component - The Dialog</p>
  
  <pre class="lang-js prettyprint-override"><code>export class ConfirmationDialogComponent {
  
    constructor(@Inject(MAT_DIALOG_DATA) private dialogModel: ConfirmationDialogModel) {}
  }
  </code></pre>
  
  <p>Dialog Template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1 mat-dialog-title *ngIf="dialogModel.Title"&gt;{{dialogModel.Title}}&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
    {{dialogModel.SupportingText}}
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button color="primary" [mat-dialog-close]="false"&gt;Cancel&lt;/button&gt;
    &lt;button mat-raised-button color="primary"[mat-dialog-close]="true" cdkFocusInitial&gt;{{dialogModel.ActionButton}}&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Model - What is getting injected</p>
  
  <pre class="lang-js prettyprint-override"><code>export interface ConfirmationDialogModel {
    Title?: string;
    SupportingText: string;
    ActionButton: string;
  }
  </code></pre>
  
  <p>Unit Test - Where I get the issue</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('Confirmation Dialog Component', () =&gt; {
  
    const model: ConfirmationDialogModel = {
      ActionButton: 'Delete',
      SupportingText: 'Are you sure?',
    };
  
    let component: ConfirmationDialogComponent;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          ConfirmationDialogComponent
        ],
        imports: [
          MatButtonModule,
          MatDialogModule
        ],
        providers: [
          {
            // I was expecting this will pass the desired value
            provide: MAT_DIALOG_DATA,
            useValue: model
          }
        ]
      });
  
      component = TestBed.get(ConfirmationDialogComponent);
    }));
  
    it('should be created', async(() =&gt; {
      expect(component).toBeTruthy();
    }));
  });
  </code></pre>
  
  <p>Karma error</p>
  
  <p><a href="https://i.stack.imgur.com/qPe4P.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qPe4P.png" alt="Karma Error Screenshot"></a></p>