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

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?

Solution 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" 

Solution 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>