How to change css based on the conditions with Angular's *ngIf?

Question

I'm making a weather widget with Angular. I want different background colors for the day and the night. I'm using OpenWeather apis for fetching the data. OpenWeather has a method .isDay that returns true if it's day time and false for the night. I want to use this method to change the background color.

weather-widget-main.component.ts

  .....
  ...
  setWeatherData(data) {
    this.WeatherData = data;
    let sunsetTime = new Date(this.WeatherData.sys.sunset * 1000);
    this.WeatherData.sunset_time = sunsetTime.toLocaleTimeString();
    let currentDate = new Date();
    this.WeatherData.isDay = (currentDate.getTime() < sunsetTime.getTime());
    this.WeatherData.temp_celcius = (this.WeatherData.main.temp - 273.15).toFixed(0);
    this.WeatherData.temp_min = (this.WeatherData.main.temp_min - 273.15).toFixed(0);
    this.WeatherData.temp_max = (this.WeatherData.main.temp_max - 273.15).toFixed(0);
    this.WeatherData.temp_feels_like = (this.WeatherData.main.feels_like - 273.15).toFixed(0);
  }
  .....
  ...

weather-widget-main.component.html

<div id="divWeatherMain">
  <div *ngIf="WeatherData.isDay" class="weatherWidgetRow">
    <i class="fas fa-3x fa-sun sun"></i>
  </div>
  <div *ngIf="!WeatherData.isDay" class="weatherWidgetRow">
    <i class="fas fa-3x fa-moon moon"></i>
  </div>
  <div class="weatherWidgetRow cloudDiv">
    <i class="fas fa-3x fa-cloud cloud"></i>
  </div>

  <div class="weatherWidgetRow" style="font-size:32px; margin-top:5px;">
    {{WeatherData.temp_celcius}}°C
  </div>
  <div class="weatherWidgetRow" style="font-size:12px;">
    {{WeatherData.temp_min}}°C / {{WeatherData.temp_max}}°C
  </div>
  <div class="weatherWidgetRow" style="font-size:12px;">
    Feels Like: {{WeatherData.temp_feels_like}}°C
  </div>
  <div class="weatherWidgetRow" style="font-size:25px; margin-top:10px">
    {{WeatherData.name}}
  </div>
  <div class="weatherWidgetRow" style="font-size:12px;">
    Humidity: {{WeatherData.main.humidity}}%
  </div>
</div>

weather-widget-main.component.css

.....
...
#divWeatherMain {
  display: block;
  border-radius: 10px;
  width: 200px;
  height: 220px;
  background: rgb(0,0,0);
  background: linear-gradient(100deg, rgba(0,0,0,1) 0%, rgba(8,7,42,1) 100%);
  color: White;
  font-family: 'Segoe UI', Tamoha, Geneva, Verdana, sans-serif;
}
.....
...

Does this answer your question? Angular: conditional class with *ngClass — Ravi
– Ravi, Commented Sep 16, 2020 at 5:53

Kardon63 · Accepted Answer · 2020-09-16 05:52:56Z

1

You can use ngClass to achieve this

Example:

 <div class="weatherWidgetRow" [ngClass]="{'class1': WeatherData.isDay === ture, 'class2': WeatherData.isDay === false}">
    <i same for here you can use ng class to change the icon></i>
  </div>

answered Sep 16, 2020 at 5:52

Kardon63

3421 gold badge6 silver badges21 bronze badges

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

Comments

Vinay · Accepted Answer · 2020-09-16 06:09:19Z

0

<div class="weatherWidgetRow">
    <i [ngClass]="WeatherData.isDay ? fas fa-3x fa-sun sun : fas fa-3x fa-moon moon"></i>
</div>

answered Sep 16, 2020 at 6:09

Vinay

2,3394 gold badges23 silver badges34 bronze badges

Comments

cucuru · Accepted Answer · 2020-09-16 06:33:16Z

0

You have to use ngClass, there are different ways to do it depending on your usage.

Check:

https://angular.io/api/common/NgClass

answered Sep 16, 2020 at 6:33

cucuru

3,75811 gold badges50 silver badges87 bronze badges

Comments

Viral Patel · Accepted Answer · 2020-09-17 13:34:46Z

0

You can use

<div id="divWeatherMain">
<div class="weatherWidgetRow" [ngClass]=”WeatherData.isDay? day-bg-color: night-bg-color”> 
<i class="fas fa-3x" [ngClass]=”WeatherData.isDay?  fa-sun sun : fa-moon moon”></i> 
</div>
    
...
</div>

answered Sep 17, 2020 at 13:34

Viral Patel

1,1166 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to change css based on the conditions with Angular's *ngIf?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related