weather-base documentation
  1. Components
  2. CurrentWeatherDetailsContainerComponent

File

apps/live-weather/src/app/shared/current-weather-details-container/current-weather-details-container.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector weather-base-current-weather-details-container
styleUrls ./current-weather-details-container.component.scss
templateUrl ./current-weather-details-container.component.html

Index

Inputs

Inputs

weather
Type : IWeatherDetail
Defined in apps/live-weather/src/app/shared/current-weather-details-container/current-weather-details-container.component.ts:16
 
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IWeatherDetail } from '../models/IWeatherDetail';

@Component({
  selector: 'weather-base-current-weather-details-container',
  templateUrl: './current-weather-details-container.component.html',
  styleUrls: ['./current-weather-details-container.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
/**
 * Create a ui container with current weather image along with summary.
 */
export class CurrentWeatherDetailsContainerComponent {
  @Input() weather!: IWeatherDetail;
}
Copy
<div
  fxLayout="row wrap"
  class="place-details mat-elevation-z2"
  fxLayoutAlign="space-around center"
  fxLayoutGap="2rem"
>
  <weather-base-info-card
    label="Dew point"
    value="{{ weather?.dew_point }} °C"
  ></weather-base-info-card>
  <weather-base-info-card
    label="Pressure"
    value="{{ weather?.pressure }}hPa"
  ></weather-base-info-card>
  <weather-base-info-card
    label="Humidity"
    value="{{ weather?.humidity }}%"
  ></weather-base-info-card>
  <weather-base-info-card
    label="Visibility"
    value="{{ weather?.visibility }} m"
  ></weather-base-info-card>
</div>
Copy

./current-weather-details-container.component.scss 

.place-details {
  padding: 1rem;
}

.weather-icon {
  width: 5rem;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""