Property binding matHeaderRowDef not used by any directive on an embedded template

Issue

Here is the table html:

<mat-table matSort class="inbox__messages" #table [dataSource]="dataSource">

<!-- Building Column -->
<ng-container matColumnDef="building">
  <mat-header-cell *matHeaderCellDef>
  <div class="inbox__messages__header">
    <h3 class="inbox__messages__header-label">Bâtiments</h3>
    <mat-form-field class="inbox__messages__dropdown">
      <mat-select placeholder="Choisir un bâtiment">
        <mat-option *ngFor="let building of buildings" [value]="building.value">
          {{ building.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">
  <span class="inbox__messages__body-building">{{element.building}}</span>
</mat-cell>
</ng-container>

 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [class.expanded]="expandedElement == row"
(click)="expandedElement = row"></mat-row>

This error happens on ng test. What am I missing? I have imported MatHeaderRowDef into my component aswell as into the module.

Solution

We have had exactly the same issue concerning the property matHeaderRowDef and also matRowDefColumns. We solved it by simply importing the material table module, i.e. MatTableModule, in the unit test spec file.

Specifically, we imported it in the initial declarations and then within the beforeEach block.

To better clarify, here is the my-awesome.component.spec.ts file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAwesomeComponent } from './my-awesome.component';
import { MatTableModule } from '@angular/material';

describe('MyAwesomeComponent', () => {
  let component: MyAwesomeComponent;
  let fixture: ComponentFixture<MyAwesomeComponent>;

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

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Hope this helps :)

Answered By - OZONO