CODEWITHSUNDEEP
angulartypescript
Gyn Manstot
Gyn Manstot

Reputation: 193

Apply class to html element in ngFor loop

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

Upvotes: 1

Views: 67

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73731

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

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

Upvotes: 2

Related Questions