Angular Material Cards

In this lecture we'll talk about another layout component which is Cards, a card is a container for content and actions about a single topic.

So as always we need to import the module in material.module.ts and add it to the MaterialComponents[] array.

import { MatCardModule } from '@angular/material';

MaterialComponents = [
    MatCardModule
]

Now we can create a basic card in the HTML the component is mat-card.

<mat-card>
  basic card
</mat-card>

If you take a look at the browser you should be able to see a basic card.

Angular material provides a few predefined sections that can be used inside this mat-card component let's take look at them, at the top we usually have a card title so we're gonna add mat-card-title component, after that we have the text content displayed using the mat-card-content component and finally at the bottom we have a section for user actions for example button clicks the component is mat-card-actions component.

<mat-card>
  <mat-card-title>
    Card Title
  </mat-card-title>
  <mat-card-content>
    This is the Card content
  </mat-card-content>
  <mat-card-actions>
    <button mat-flat-button>See More</button>
  </mat-card-actions>
</mat-card>

Now as you can see at the browser we have the title, the content and the actions section if you want the button right aligned you can do so using the align attribute on the mat-card-actions component.

<mat-card-actions aligned="end">
    ....
</mat-card-actions>

This is the basic idea behind cards in angular material there are a couple more sections with which you can truly build any card layout that you wish to so let me point you to the documentation where you can found a full-fledged application of a card.

You can also build your own cards for a registration form a login form, pricing section user profiles and a lot more, one component to fulfill a variety of requirements.