Angular doesn't allow custom attributes on div, how to fix?

Question

Angular

There is a div , it has the aria-valuenow attribute . When I try to substitute value ( {{ .. }} ) it throws an error

Template parse errors:
Can't bind to 'aria-valuenow' since it isn't a known property of 'div'. (">{{ skill.name }}</p>
            <div class="progress-bar" role="progressbar" style="width: 25%;" [ERROR ->][aria-valuenow]="skill.percent" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>

here is the piece of code

<div class="progress skills__item" *ngFor="let skill of skills">
            <div class="progress-bar" role="progressbar" style="width: 25%;" [aria-valuenow]="skill.percent" aria-valuemin="0" aria-valuemax="100">{{ skill.percent + '%' }}</div>
        </div>

How to fix it?

Answer 1

[attr.aria-valuenow]="skill.percent"