Can't bind to 'aria-valuenow' since it isn't a known property of 'div'

Question

What's wrong with the following code? Hapenned to me when I tried to assign an expression to an element,

<div class="progress-bar progress-bar-striped active" role="progressbar"   aria-valuenow="{{MY_PREC}}" aria-valuemin="0" aria-valuemax="100" >     {{MY_PREC}}   </div> 

also tried as

[aria-valuenow]={{MY_PREC}} 

Seem like it happens since RC5

any ideas?

Answer 1

Angular2 binding is property binding by default. There is no aria-valuenow property on div if there is no directive or component applied that has such an @Input()

Use instead explicit attribute binding

attr.aria-valuenow="{{MY_PREC}}"  

or

[attr.aria-valuenow]="MY_PREC"  

Answer 2

In .ts file:

public MY_PREC = '55'; 

In .html file:

<div class="progress-bar progress-bar-striped active" role="progressbar"      [attr.aria-valuenow]="MY_PREC" [style.width]="MY_PREC+'%'" aria-valuemin="0" aria-valuemax="100" >      {{MY_PREC}} </div>