将数据绑定到 Angular 内的非本地 html 属性

Question

I like to bind some data from database to an unnatural tag element in an Angular app, this is related to "Isotope filter": I want to change this

 <li><a href="#" data-filter=".joomla"></li>

to

 <li *ngFor="let cat of categories;index as i"> <a href="#" class="active" [data-filter]=categoriesId[i]>{{cat.Title}}</a>

where categoriesId is an array of string in my ts file, but I face this error:

Can't bind to 'data-filter' since it isn't a known property of 'a'.

am I doing an impossible action? if yes is there any solution to do something like that?

Answer 1

You can use the Attribute binding syntax which is documented here :

 <li *ngFor="let cat of categories;index as i"> <a href="#" class="active" [attr.data-filter]=categoriesId[i]>{{cat.Title}}</a> </li>