Now, let's implement the title and content elements of mat-card, as shown:
src/app/app.component.ts <mat-toolbar color="primary"> <span>LocalCast Weather</span></mat-toolbar><div>Your city, your forecast, right now!</div><div fxLayout="row"> <div fxFlex></div> <mat-card fxFlex="300px"> <mat-card-header> <mat-card-title>Current Weather</mat-card-title> </mat-card-header> <mat-card-content> <app-current-weather></app-current-weather> </mat-card-content> </mat-card> <div fxFlex></div></div>
With Material, less is always more. You'll note that we were able to remove the center div and directly apply the fxFlex on the center card. All material elements have native support for the Flex Layout engine, and this has tremendous ...