Roka545 Roka545 - 4 months ago 40
CSS Question

How to update bootstrap progress bar.

The documentation on bootstrap progress bars illustrate how to display a progress bar with default values and completion value, but now how to update it? So, what's the simplest way to go about updating the value and width?

This is my progress bar in file home.html:

<div class="progress">
<div id="trainingProgressBar" class="progress-bar
progress-bar-success progress-bar-striped active"
role="progressbar"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width:40%">
{{trainingProgress}}% Complete
</div>
</div>


and in my home.ts file I declare my trainingProgress value:

public trainingProgress: number = 10;


The text will change to whatever trainingProgress is, but the width will not because trainingProgress isn't linked to
aria-valuenow
and
width:%
.

Answer

Use attribute and style binding:

<div class="progress">
    <div id="trainingProgressBar" class="progress-bar 
        progress-bar-success progress-bar-striped active" 
        role="progressbar" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        [attr.aria-valuenow]="trainingProgress" 
        [style.width.%]="trainingProgress">
        {{trainingProgress}}% Complete
    </div>
</div>