weather-base documentation
  1. Components
  2. CurrentWeatherSummaryContainerComponent

File

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

Metadata

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

Index

Properties
Inputs

Inputs

weather
Type : IWeatherDetail
Defined in apps/live-weather/src/app/shared/current-weather-summary-container/current-weather-summary-container.component.ts:19

Properties

Public currentTime
Default value : new Date().toISOString()
Defined in apps/live-weather/src/app/shared/current-weather-summary-container/current-weather-summary-container.component.ts:17

Represents current time 

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IWeatherDetail } from '../models/IWeatherDetail';

@Component({
  selector: 'weather-base-current-weather-summary-container',
  templateUrl: './current-weather-summary-container.component.html',
  styleUrls: ['./current-weather-summary-container.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
/**
 * Create a ui container with current weather image along with summary.
 */
export class CurrentWeatherSummaryContainerComponent {
  /** Represents current time */
  public currentTime = new Date().toISOString();

  @Input() weather!: IWeatherDetail;
}
Copy
<div fxFill fxLayout="row" fxLayoutAlign="start center" class="temperature-card" *ngIf="weather">
  <img [src]="weather!.weather[0]?.icon | weatherIcon" class="weather-icon" fxFlex="5rem" />
  <div fxLayout="column" fxLayoutAlign="center start" fxFlex>
    <span class="temperature">{{ weather!.temp | roundoff }} °C</span>
    <span class="grey"
      >Feels like <b>{{ weather!.feels_like | roundoff }}°C</b>,
      {{ weather!.weather[0].description }}</span
    >
    <span class="grey mat-small">{{ currentTime | date: 'longTime' }}</span>
  </div>
  <div fxLayout="row" fxLayoutAlign="start" fxFlexAlign="start">
    <h3 id="place-name" class="red"><span class="live-icon"></span> Live</h3>
  </div>
</div>
Copy

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

@import '~@angular/material/theming';

$pink: mat-color(mat-palette($mat-pink));

.temperature-card {
  padding: 1rem;
}

.temperature {
  font-size: larger;
  font-weight: bold;
  line-height: 2rem;
}

.red {
  color: $pink;
}

.live-icon {
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: $pink;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""