Angular2 use *ngif to set class name in html code

Question

I've tried some stuff cause I am building a weather dashboard.

I load weather data with http and subscribe, so I'll getting an observable back I cannot go trough like an array in typescript to add new properties.

For example I want to look on each weather data and look if a value has more than 70 °F and tell the weatherdata item to add a new property "weatherdata-sun-hot". Otherwise it should use an other class name "weatherdata-sun-normal" I would use this as a class name to put it in html later with interpolation.

So my idea is to solve this with the html template

So far I do have my code here

<ul>
   <li *ngFor="let item of weatherdata">{{item.dt_txt}} | {{item.main.temp_min}} -> {{item.main.temp_max}}</li>
</ul>

Is there an elegant way to solve this?

Thanks for any help.

you need conditional class, see this https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass — Ali Adravi, Apr 20 '18 at 20:57
@AliAdravi: Thanks for the hint but I cannot see the if/else mechanism there. Like if val greater than something than use classname x otherwhise classname y. Can you give me a quick example? :-) Thanks again. — user3332010, Apr 20 '18 at 21:05

score 1 · Accepted Answer · answered Apr 20 '18 at 21:13

You need to use ngClass directive:

<ul>
    <li *ngFor="let item of weatherdata" [ngClass]="{'weatherdata-sun-hot': item.main.temp_min > 70, 'weatherdata-sun-normal': item.main.temp_min <= 70}">
        {{item.dt_txt}} | {{item.main.temp_min}} -> {{item.main.temp_max}}
    </li>
</ul>

Or you can do it in the component's code and bind to it:

template

<ul>
    <li *ngFor="let item of weatherdata" [ngClass]="tempClass(item)">
        {{item.dt_txt}} | {{item.main.temp_min}} -> {{item.main.temp_max}}
    </li>
</ul>

component

@Component(...)
class MyComponent {
    tempClass(item): any {
        const hot = item.main.temp_min > 70;
        return {
            'weatherdata-sun-hot': hot,
            'weatherdata-sun-normal': !hot
        };
    }
}

Thanks for the perspective... I should have thought of that :-) So easy and good. Have a nice day. — user3332010, Apr 21 '18 at 07:11

Angular2 use *ngif to set class name in html code

1 Answers1