How to update bootstrap progress bar.

Question

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 1

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>

Here the PLUNKER