CODEWITHSUNDEEP
cssangular
Reagan L
Reagan L

Reputation: 79

Angular 2 Inline Style with ngFor

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%">

Upvotes: 6

Views: 11156

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364747

With style property binding, we can specify optional units, including %.
(This is documented in the Template Syntax dev guide.)

<div class="bar" [style.height.%]="chart.CSSBarHeight">

Upvotes: 6

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658253

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.

Upvotes: 9

Related Questions