src/app/weather/weather-list/weather-list.component.ts
WeatherListComponent for rendering weather forecast tile
| providers |
WeatherService
|
| selector | app-weather-list |
| styleUrls | weather-list.component.scss |
| templateUrl | ./weather-list.component.html |
Inputs |
constructor()
|
weathers
|
Input binding for weather list
Type: |
import { WeatherService } from './../weather.service';
import { Component, Input } from '@angular/core';
/**
* WeatherListComponent for rendering weather forecast tile
*/
@Component({
selector: 'app-weather-list',
templateUrl: './weather-list.component.html',
styleUrls: ['./weather-list.component.scss'],
providers: [WeatherService]
})
export class WeatherListComponent {
/**
* Input binding for weather list
* @type {*}
*/
@Input() weathers: any;
/**
* Creates an instance of WeatherListComponent.
*/
constructor() {}
}
<div class="weather-container" *ngFor="let weather of weathers">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ weather[0].dt | myDate | date: 'EEE, MMM d, y' }}</h4>
<div class="card-text">
<ul>
<li *ngFor="let item of weather">
<i class="owi owi-{{ item.weather[0].icon }}" title="{{ item.weather[0].main }}"></i>
<div class="weather-info">
<p class="time">
{{ item.dt | myDate | date: 'hh:mm a' }}
</p>
<p class="temp">
{{ item.main.temp }}°C
</p>
<p class="min-temp">
{{ item.main.temp_min }}°C
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>