CODEWITHSUNDEEP
angularangular-materialangular-template
plantbeard
plantbeard

Reputation: 398

Can't bind to 'matRowDefColumns' since it isn't a known property of 'mat-row'

I am testing an Angular 7 component which uses mat-table, and I have defined a mock module, which declares and exports a mock mat-row component as such:

@Component({selector: 'mat-row', template: ''}) export class StubMatRowComponent {
  @Input() public matRowDefColumns: string[];
}

The usage in the template is this:

<mat-row *matRowDef="let foo; columns: displayedColumns;"></mat-row>

With this syntax, the error I get is "Can't bind to 'matRowDefColumns' since it isn't a known property of 'mat-row'."

If I didn't need foo, I could write this as follows, which would work:

<mat-row matRowDef="displayedColumns"></mat-row>

Does anyone know how I can get my mock to work using template syntax?

As a side note, obviously an alternative is rather than importing my mock module, I could import the real thing, but just as obviously, for testing purposes I prefer mocks rather than full integrations.

Upvotes: 4

Views: 7011

Answers (1)

plantbeard
plantbeard

Reputation: 398

The answer is that because matRowDef is a structural directive, not a property to be bound, a mock structural directive must be created and imported:

@Directive({
  selector: '[matRowDef]'
}) export class StubMatRowDefDirective {
  @Input() matRowDefColumns: string[];
}

Upvotes: 4

Related Questions