Card header and content

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 ...

Get Angular 6 for Enterprise-Ready Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.