CODEWITHSUNDEEP
twitter-bootstrapangularprogress-bar
Ankit
Ankit

Reputation: 267

Bootstrap progress bar with angular 4

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

Upvotes: 8

Views: 20047

Answers (3)

Lakshan
Lakshan

Reputation: 1436

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

enter image description here

Upvotes: 4

G&#252;nay G&#252;ltekin
G&#252;nay G&#252;ltekin

Reputation: 4793

You can also set;

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

Upvotes: 4

mankers
mankers

Reputation: 752

Replace

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

with this (done in angular way)

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

Upvotes: 34

Related Questions