I am trying to do following:
<tr id="row" *ngFor="let data of dataList">
<td class="search-result" data-item-value="{{data.value}}">
{{data.text}}
</td>
</tr>
Here dataList is an array of object with prop value and text.
I am getting following error:
zone.js:522 Unhandled Promise rejection: Template parse errors: Can't bind to 'item-value' since it isn't a known property of 'td'. ("" *ngFor="let data of dataList"> ]data-item-value="{{data.value}}">{{data.text}} "): MultiListBoxComponent@24:66 ; Zone: ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors: Can't bind to 'item-value' since it isn't a known property of 'td'. ("……} Error: Template parse errors: Can't bind to 'item-value' since it isn't a known property of 'td'. ("" *ngFor="let data of dataList"> ]data-item-value="{{data.value}}">{{data.text}} "): MultiListBoxComponent@24:66
Is value binding to custom attributes not allowed in angular 2?
You have to use
[attr.data-item-value]="data.value"
instead of
data-item-value="{{data.value}}"
Check: https://stackoverflow.com/a/38792409/5049472
You could use DomSanitizationService
with a function generating td
.