Weather 5

weather-report.component.html

<mat-card class="mat-elevation-z5" *ngIf="data$ | async as data">
  <mat-card-header>
    <mat-card-title>{{data.name}}'s weather</mat-card-title>
    <mat-card-subtitle>Today: {{today | date }}</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <div class="flex-row">
      <div class="temp">
        <span class="big-text">{{data.main.temp | number:'0.0-0'}} C</span>
        <span>Feels like </span>
        <span>{{data.main.feels_like | number: '0.0-0'}} C</span>
      </div>
      <div class="outlook">
        <span>{{data.weather[0].description | titlecase}}</span>
      </div>
    </div>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>