Bootstrap progress bar with angular 4

Question

I am new to angular and i am unable to understand how to use bootstrap progress bar with Angular.

Below is the bootstrap documentation

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

I am trying to get the above result using angular. The width % is stored in a variable {{capacity.available}}

So i am doing the following but its not giving me the expected result.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{capacity.available}}">
        60%
      </div>
    </div>

Warning message in the console looks like sanitizing unsafe style value width:54

What am i doing wrong? Any suggestions on how this can be done?

Thank you for any help in advance

What type is stored in capacity.available? Is it string "60%" or number: 60? — mankers
– mankers, Commented May 17, 2017 at 8:51
Its stored as number. My class is structured as class Capacity { total: number; available: number; } — Ankit
– Ankit, Commented May 17, 2017 at 8:53
And this is your problem, you forgot about %. This should help: style="width:{{capacity.available}}%" — mankers
– mankers, Commented May 17, 2017 at 9:03
Tried with the percent gives me the same warning on the console.. sanitizing unsafe style value width:54% — Ankit
– Ankit, Commented May 17, 2017 at 9:43
Ok, try to replace it with angular way: [style.width]="capacity.available + '%'" — mankers
– mankers, Commented May 17, 2017 at 10:09

mankers · Accepted Answer · 2017-05-17 10:47:55Z

34

Replace

style="width:{{capacity.available}}%"

with this (done in angular way)

[style.width]="capacity.available + '%'"

answered May 17, 2017 at 10:47

mankers

75210 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günay Gültekin · Accepted Answer · 2019-05-08 07:25:55Z

4

You can also set;

[ngStyle]="{width: capacity.available + '%'}"

answered May 8, 2019 at 7:25

Günay Gültekin

4,8218 gold badges35 silver badges37 bronze badges

Comments

Lakshan · Accepted Answer · 2019-10-06 16:55:48Z

4

try with this for progress bar with label (value),

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="{{capacity.available}}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: capacity.available + '%'}">
   {{capacity.available}}%
   </div>
</div>

Example,

capacity.available = 14

edited Oct 6, 2019 at 16:55

answered Oct 6, 2019 at 16:50

Lakshan

1,4613 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Bootstrap progress bar with angular 4

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related