It is possible to add values to an inline style using interpolation in Angular 4

Question

I'm learning angular 4 by myself, and I want to know if is it possible to do this:

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-
valuemin="0" aria-valuemax="100" style="width {{ item.percent_position}}%;">
{{ item.percent_position }}</div>
</div>

What I want to achieve is to extend the width in relation to the value thrown by {{item.percent_position}}

When I use [style]="width: {{ item.percent_position }}%;" I got this error:
Uncaught Error: Quotes are not supported for evaluation! Statement: {{item.percent_position}}%;

What I want is this:

The result I get with the code above is this:

Answer 1

When you use square brackets, you're binding to an expression, so you're suggested solution doesn't work, as Angular expects this to be executable JS:

 [style]="width: {{ item.percent_position }}%;"

In contrast, the following should work perfectly fine:

 [style.width]="item.percent_position + '%' "

If you have multiple styles to bind to, you can use ngStyle to bind to an object:

 [ngStyle]="{ 'width': item.percent_position + '%' }"

In any case: If you use square brackets, make sure what is bound to it is an executable expression!

Answer 2

I found that style would not work, however, I could add a custom class and call that class. For example:

<div class="{{ item.className }}">

Hopefully, that helps someone who reads this page.