ngir documentation
  1. Components
  2. WeatherComponent

File

src/app/pages/dashboard/weather/weather.component.ts

Metadata

selector ngx-weather
styleUrls weather.component.scss
templateUrl ./weather.component.html 
import { Component } from '@angular/core';

@Component({
  selector: 'ngx-weather',
  styleUrls: ['./weather.component.scss'],
  templateUrl: './weather.component.html',
})

export class WeatherComponent {
}

<nb-card size="medium">
  <nb-card-body>
    <div class="location">
      <span>New York</span>
    </div>
    <div class="date">
      <span>Mon 29 May</span>
    </div>
    <div class="daily-forecast">
      <div class="info">
        <div class="temperature">
          <span>20&deg;</span>
        </div>
        <div class="icon">
          <i class="ion-ios-sunny-outline"></i>
        </div>
      </div>
      <div class="details">
        <div class="parameter">
          <span class="parameter-name">max</span>
          <span class="parameter-value">23&deg;</span>
        </div>
        <div class="parameter">
          <span class="parameter-name">min</span>
          <span class="parameter-value">19&deg;</span>
        </div>
        <div class="parameter">
          <span class="parameter-name">wind</span>
          <span class="parameter-value">4 km/h</span>
        </div>
        <div class="parameter">
          <span class="parameter-name">hum</span>
          <span class="parameter-value">87%</span>
        </div>
      </div>
    </div>
    <div class="weekly-forecast">
      <div class="day">
        <span class="caption">Sun</span>
        <i class="ion-ios-cloudy-outline"></i>
        <span class="temperature">17&deg;</span>
      </div>
      <div class="day">
        <span class="caption">Mon</span>
        <i class="ion-ios-sunny-outline"></i>
        <span class="temperature">19&deg;</span>
      </div>
      <div class="day">
        <span class="caption">Tue</span>
        <i class="ion-ios-rainy-outline"></i>
        <span class="temperature">22&deg;</span>
      </div>
      <div class="day">
        <span class="caption">Wed</span>
        <i class="ion-ios-partlysunny-outline"></i>
        <span class="temperature">21&deg;</span>
      </div>
    </div>
  </nb-card-body>
</nb-card>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""