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

Angular

Angular Problem Overview

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?

Angular Solutions

Solution 1 - Angular

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

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>

Solution 3 - Angular

Have you implement the new ngModule stuff ?

If so, the order of declarations has an impact on how the application should work. Maybe you should try to declare your directives in another order

Solution 4 - Angular

ng-style="{width: MY_PREC+ '%'}" you can dynamically change the progress inside progress bar inside progress bar tag

Categories
Recommended Angular Solutions

Previous Solution:

How to add SHA-1 to android application

AndroidFirebaseSha1Firebase Dynamic-Links

Next Solution:

How to check release / debug builds using cfg in Rust?

DebuggingRustPreprocessorRust Cargo

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTheUnrealView Question on Stackoverflow
Solution 1 - AngularGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - AngularShivarajRHView Answer on Stackoverflow
Solution 3 - AngularAlexis Le GalView Answer on Stackoverflow
Solution 4 - AngularSwaView Answer on Stackoverflow