Apply class to html element in ngFor loop

Question

<div class="weather-app-wrapper" *ngIf="weather !== undefined">
    <div class="weather-wrapper" *ngFor="let forecast of weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ngClass]="{{forecast.condition}}"></div>
            <h1>{{forecast.tempMin}}º - {{forecast.tempMax}}º</h1>
            <p>{{forecast.day}}</p>
        </div>
    </div>
</div>

I'm trying to apply a class to an html element in this line: <div class="forecast-icon" [ngClass]="{{forecast.condition}}"></div> although it's giving an error. Is there a way to do this in html or does it have to be done in typescript? I know how to do it for static html, but not in a loop creating html elements. I know forecast.condition holds a valid string, and the loop is looped 5 times, the rest of the properties work just fine. What's a way I can do this?

Example:

//forecast.condition = "sunny"
    <div class="forecast-icon"> 
should turn into 
    <div class="forecast-icon sunny"> 
on the html page

Here's the forecast model:

export class ForecastDay {
    tempMin: number;
    tempMax: number;
    day: string;
    condition: string;
}

Here's the error:

Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
            <h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token {, expected identifier, keyword, or string at column 2 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
            <h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Missing expected : at column 21 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
            <h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token } at column 21 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>
            <h1>{{forecast.tempMin}}º - {{forecast.tempMax"): ng:///AppModule/WeatherComponent.html@3:39 Parser Error: Unexpected token '}' at column 22 in [{{forecast.condition}}] in ng:///AppModule/WeatherComponent.html@3:39 (" weather.forecastDays">
        <div class="weather-card">
            <div class="forecast-icon" [ERROR ->][ngClass]="{{forecast.condition}}"></div>

[ngClass]="{ 'yourclass': forecast.condition }" should be like this.. — Sanoj_V
– Sanoj_V, Commented May 27, 2018 at 16:41
Does forecast.condition contain the name of the class that you want to add? — Martin Parenteau
– Martin Parenteau, Commented May 27, 2018 at 16:43
@Sanoj_V I did [ngClass]="{ 'forecast-icon': forecast.condition }" but it doesn't apply the class, am I doing it wrong? — Gyn Manstot
– Gyn Manstot, Commented May 27, 2018 at 16:50

Martin Parenteau · Accepted Answer · 2018-05-27 16:48:47Z

2

You don't need to use interpolation with [ngClass]. You can set the class with:

<div class="forecast-icon" [ngClass]="forecast.condition"></div>

answered May 27, 2018 at 16:48

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

1 Comment

Gyn Manstot Over a year ago

Thanks very much!

Collectives™ on Stack Overflow

Apply class to html element in ngFor loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related