Added weather widget
This commit is contained in:
30
src/app/weather/widget/weatherWidget.component.html
Normal file
30
src/app/weather/widget/weatherWidget.component.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="w-100 h-100">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h3 class="mb-0">London, ON</h3>
|
||||
<h3 class="mb-0">{{weatherService.weather?.currently.summary}}</h3>
|
||||
</div>
|
||||
<div><i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i></div>
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="mb-0">{{weatherService.weather?.currently.temperature | round: 1}} °C</h1>
|
||||
</div>
|
||||
<div>
|
||||
Feels Like: {{weatherService.weather?.currently.apparentTemperature | round}} °C
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-3">
|
||||
<div>
|
||||
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
|
||||
{{weatherService.weather?.daily.data[0].temperatureHigh | round}} °C
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
|
||||
{{weatherService.weather?.daily.data[0].temperatureLow | round}} °C
|
||||
</div>
|
||||
<div>
|
||||
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Reference in New Issue
Block a user