Setting HTML element width using ng-style and percentage value in AngularJS

For the benefit of searchers, if you needed to fill the area, but leave a bit of space at the end (for example, to provide textual detail), this could be achieved with something similar to the following code:

<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}">&nbsp;</div>

Obviously, this would only work with CSS3 compliant browsers, but it scales well dynamically.

In case of you would like to avoid watcher in Angular JS Application. We could make use of the following syntax :

1. Pixels -  [style.max-width.px]="value" 
2. EM - [style.max-width.em]="value"
3. Percent - [style.max-width.%]="value" 

The code within your ng-style attribute is a javascript object, so you could append a percentage symbol on the end of you width value. As you are appending a string to a number it will also convert the value of width to a string.

<div id="progressBackground" ... >
    <div id="progressBar"
         ng-model="..."
         ng-style="{ 'width': completionPercent + '%' }"
         ... ></div>
</div>

Another way to achieve this is

[style.width.%]="completionPercent"

In your code

<div id="progressBackground" ... >
<div id="progressBar"
     ng-model="..."
     [style.width.%]="completionPercent"
     ... ></div>