Usage of custom CSS in Angular2 gives "Can't bind since not native property" error

Question

My CSS

ol.progress[data-steps="9"] li { width: 11%; }

I want to use the above in my template like this:

<ol class="progress" data-steps=4>

   <li *ngFor..> </li>

I tried:

<ol class="progress" [data-steps]="myNg2Variable">

Get errors:

Template parse errors: Can't bind to 'data-steps' since it isn't a known native property

How to achieve?

Pierre Urban · Accepted Answer · 2016-07-09 21:02:03Z

1

You need to use the attr property with interpolation:

<ol class="progress" attr.data-steps="{{myNg2Variable}}">

Cheers

answered Jul 9, 2016 at 21:02

Pierre Urban

1494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

you can also use "by value" notation <ol [attr.data-steps]="myNg2Variable">