Angular 6 for Enterprise-Ready Web Applications

Representing weather in Material Card

Material card is a great container to represent the current weather information. The card element is surrounded by a drop-shadow that delineates the content from its surroundings:

1. Import MatCardModule in material.module:

src/app/material.module.tsimport { ..., MatCardModule} from '@angular/material'...@NgModule({  imports: [..., MatCardModule],  exports: [..., MatCardModule],})

2. In app.component, surround <app-current-weather> with <mat-card>:

src/app/app.component.ts  <div style="text-align:center">    <mat-toolbar color="primary">      <span>LocalCast Weather</span>    </mat-toolbar>    <div>Your city, your forecast, right now!</div>    <mat-card>      <h2>Current Weather</h2> <app-current-weather></app-current-weather> ...