Angular 2 Inline Style with ngFor

Question

I am trying to have a dynamic height for a div tag like so:

<div class="summary"  *ngFor="let chart of chartCounts">
    <div class="bar" [style.height]="{{chart.CSSBarHeight}}">
        <div class="countLabel">{{chart.Count}}</div>
    </div>
    <div class="barlabel">{{chart.DaysLeft}}</div>
</div>

I'm not having any luck getting anything to work for doing inline style this way. It throws an error on the console that says:

Potentially unhandled rejection [3] Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{chart.CSSBarHeight}}] in function AppComponent(http) {@150:61 ("ary"  *ngFor="let chart of chartCounts">
                                        <div class="bar" [ERROR ->][style.height]="{{chart.CSSBarHeight}}">
                                            <div class="): function AppComponent(http) {@150:61 

Anyone have an idea on what I am doing wrong and how to get the style to work in this scenario? The rest of what I am doing here is working great. I'd like to be able to set it as a percentage so after it finishes rendering it comes out to something like:

<div class="bar" style="height:80%">

Answer 1

This is too much

[style.height]="{{chart.CSSBarHeight}}"

Use instead either

style.height="{{chart.CSSBarHeight}}%"

or

[style.height]="chart.CSSBarHeight + '%'"

but not both at the same time.