How to style element width % using ng-style

Question

I want to style my progress bar using with percentages but following ng documentation I can't seem to grasp it. It should be 20% with, but it's 100% (default).

Fiddle: http://jsfiddle.net/u6xp8csh/

Here is what I have tried

HTML

<div data-ng-app>
    <div data-ng-controller="ProgressBarController">
        <div class="progress-bar-container">
            <div class="progress-bar" ng-style="{'width' : '{{ progress }}'% }">{{ progress }}</div>
        </div>
    </div>
</div>

JS

function ProgressBarController($scope) {
    $scope.progress = 20;
}

CSS

.progress-bar-container {
    width: 300px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid black;
}
.progress-bar {
    height: 100px;
    background-color: green;
}

Rasalom · Accepted Answer · 2014-12-08 13:16:05Z

11

progress field accessible without '{{':

 ng-style="{'width' : progress + '%' }"

http://jsfiddle.net/gc343w7x/

answered Dec 8, 2014 at 13:16

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

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

Comments

David Souther · Accepted Answer · 2014-12-08 13:16:05Z

5

The inside of the ng-style is stripped down Javascript, so you have a string '{{progress}}' immediately followed by the modulus operator %.

ng-style="{width: progress + '%'}"

will suffice.

answered Dec 8, 2014 at 13:16

David Souther

8,1942 gold badges39 silver badges54 bronze badges

Comments

Remco Haszing · Accepted Answer · 2014-12-08 13:13:54Z

2

Move the % inside of the quotes.

ng-style="{'width' : '{{ progress }}%' }">

answered Dec 8, 2014 at 13:13

Remco Haszing

7,9797 gold badges47 silver badges89 bronze badges

Comments

Abdi Abdi · Accepted Answer · 2020-01-12 13:25:06Z

2

 <p class="bar" [style.width.%]="value">
        <span>Helo The World</span>
    </p>

For More Detailes click here

answered Jan 12, 2020 at 13:25

Abdi Abdi

116 bronze badges

1 Comment

E. Zeytinci Over a year ago

While this code may provide a solution to OP's problem, it is highly recommended that you provide additional context regarding why and/or how this code answers the question. Code only answers typically become useless in the long-run because future viewers experiencing similar problems cannot understand the reasoning behind the solution.

Collectives™ on Stack Overflow

How to style element width % using ng-style

HTML

JS

CSS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

CSS

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related