angular material: missing binding for cypress attribute data-cy

Question

I want to use some angular material components in my angular app. I want to test ist with cypress.io. As suggested by cypress data-cy (or data-test) attribute should be used for better selection purposes. The problem is when I use it with angular material componentes following error occurs: compiler.js:2175 Uncaught Error: Template parse errors:

Can't bind to 'test' since it isn't a known property of 'mat-row'. 1. If 'mat-row' is an Angular component and it has 'test' input, then verify >that it is part of this module. 2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the >'@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of >this component. ("

With the example below there is the problem with mat-row and using data-test

<mat-row data-test="{{row.id}}" *matRowDef="let row; columns: attributDefColumns;" (click)="detailsClicked(row.id)"></mat-row>

Answer 1

@tommueller Thank you. This should work <mat-row [attr.data-test]="{{row;id}}" *matRowDef="let row: columns; attributDefColumns." (click)="detailsClicked(row.id)">