Angular Material Card Component

Manav Pandya  Print 
02 Sep 2018
 
Intermediate
191

Card component is a kind of container that contains different elements like text, image, forms, maps, button, link and any other elements. As per the official documentation, Angular Material Card Component is a container component which holds title text, image and action buttons to represent the single or specific subject.

The Card Component can be useful in a scenario where we want to show data about a single model with all its properties. Basically, a card component follows the structure in which different elements can be implemented based on the region defined inside the card; let’s see the basic syntax about card component.

Syntax

 <mat-card>
 </mat-card>
 

Above the selector of card component is used to include card into our angular HTML, moreover, we can have a specific structure like header, content, and footer.

Example
 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-content>
 This is card Content
 </mat-card-content>
 <mat-card-footer>
 This is card Footer
 </mat-card-footer>
 </mat-card>

As you can see into above example that the body of the card is distributed into three different sections.

  • mat-card-header

  • mat-card-content

  • mat-card-footer

Let’s cover all the possible way to use card component.

Simple Card

If we just want to show card element into our page, then we can have simple card component without having extra selectors like header, footer etc.

Syntax

<mat-card> … </mat-card>
Example
 <mat-card>
<p>This Is Simple Card Component </p>
 </mat-card>

So when you run the above example, you will get output like this.

Card With Title and Subtitle

To provide a Title and Subtitle, we can make use of the inbuilt selector with card header, below you can find the syntax for the same.

Syntax

 <mat-card-title> … <mat-card-title>
 <mat-card-subtitle> … <mat-card-subtitle>
Examle
 <mat-card>
 <mat-card-header>
 <mat-card-title>This is Main Title</mat-card-title>
 <mat-card-subtitle>This is Sub Title</mat-card-subtitle>
 </mat-card-header>
 </mat-card>
 

After running above example you can have an output like this.

Card with header and footer

We have seen the example already that card can be divided into multiple section i.e. header, content and footer So that we can have a card in a distributed manner, and as per the structure we can implement elements inside card sections. There are two selectors available to show the header and footer.

  1. <mat-card-header>

  2. <mat-card-footer>

As the name suggests, header and footer part can have a different element to show details about the single model andits different properties, let’s see the simple example.

Example
 <mat-card>
<mat-card-header>
This is card Header
</mat-card-header>
<mat-card-footer>
 This is card Footer
 </mat-card-footer>
 </mat-card>

And when you run above example, you will get output like this.

In the output, we will get a structure like this, but do not worry about alignments and another design aspect, because we can customize our card component easily with a custom style sheet.

Card with Content

We have just seen that we can use header and footer section within the card to distribute element throughout the card component, the same way we can provide the section for card content as well, you just need to follow the syntax, and can include any element inside content section.

Syntax

 <mat-card-content> … </mat-card-content>
Example

In this example, im just going to use static image to show inside card content.

 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-content>
 <img src="./assets/logo.png" height="100px" width="300px"/>
 </mat-card-content>
 <mat-card-footer>
 This is card Footer
 </mat-card-footer>
 </mat-card>
 

As you can see that, in the above example, I have used all the section header, content and footer, and after running above example you can have an output like this.

Card with image

Previously we have seen examples using static text as a part of the card, but we can have image element with the card as well. For that, there is a selector which is used to include an image element in the card, and the selector is described below.

Syntax

 <img mat-card-image />
 
Example
 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-footer>
 <img mat-card-image src="./assets/logo.png" height="200px" width="300px">
 </mat-card-footer>
 </mat-card>
 

So I have used image element with the image source, and with additional property mat-card-image, which stretches image with the equal width of a container.

Card with action buttons

Sometimes we required to perform a specific operation based on button click events, for that we can make use of action buttons container for card component. For that we can use below selector to define separate section into the card for action buttons.

 <mat-card-actions> … </mat-card-actions>
 
Example
 <mat-card>
 <mat-card-header>
 This is card Header
 </mat-card-header>
 <mat-card-actions>
 <button mat-raised-button color="primary">Like</button>
 <button mat-raised-button color="accent">Share</button>
 <button mat-raised-button color="warn">Subscribe</button>
 </mat-card-actions>
 </mat-card>
 

After running above code snippet, you will get output like this.

In above example, I have used the material raised button which now acts as an action button, so this way we can include different action button within the action section of a material card component.

Combined Example

So far we have covered so many different options to try with material card component, now it’s time to implement most of the useful component into a single example. If you want to try the entire example, then you need to import different material component and should import and export it, for that please find the complete code below.

Complete Example Code

Module File

 // Material Components
 import {MatCardModule} from '@angular/material/card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatListModule} from '@angular/material/list';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatTreeModule} from '@angular/material/tree';
 import { MatFormFieldModule , MatInputModule , MatButtonModule } from '@angular/material';
 
 imports: [
 MatCardModule,
 MatDividerModule,
 MatExpansionModule,
 MatListModule,
 MatStepperModule,
 MatTabsModule,
 MatTreeModule,
 MatFormFieldModule,
 MatInputModule,
 MatButtonModule
 ],
 exports: [
 MatCardModule,
 MatDividerModule,
 MatExpansionModule,
 MatListModule,
 MatStepperModule,
 MatTabsModule,
 MatTreeModule,
 MatFormFieldModule,
 MatInputModule,
 MatButtonModule
 ],
 

Html File

 <mat-card class="example-card">
 <img mat-card-image src="./assets/logo.png" alt="Photo of a Shiba Inu">
 <mat-card-header>
 <div mat-card-avatar class="avatarImage"></div>
 <mat-card-title>Card Title</mat-card-title>
 <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
 </mat-card-header>
 <mat-card-content>
 <h3>This is the card content which is used to show some informaion to the end user</h3>
 </mat-card-content>
 <mat-card-footer>
 <h3>Copyright @ 2018 - Dotnettricks</h3>
 </mat-card-footer>
 <mat-card-actions>
 <button mat-raised-button color="primary">Like</button>
 <button mat-raised-button color="accent">Share</button>
 <button mat-raised-button color="warn">Subscribe</button>
 </mat-card-actions>
 </mat-card>
 

Style sheet (styles.css)

 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 
 body { 
 font-family: Roboto, Arial, sans-serif;
 margin: 0;
 }
 
 .avatarImage
 {
 background-image: url('./assets/logo.png');
 background-size: inherit;
 }
 

And after implementing all of the components, it’s time to run above example and you will get output like this. For the above example to demonstrate the actual use of all the selectors, I have used many of them which are listed below.

  • <mat-card>

  • <mat-card-header>

  • <mat-card-title>

  • <mat-card-subtitle>

  • <mat-card-content>

  • <mat-card-footer>

  • <mat-card-actions>

Summary

So far we have covered different types if element that supports card component, with their appropriate syntax and the in brief example that shows how to use it in a specific situation and at last its actual output that how it looks like, same way you can use and implement card component into your application this way, I hope you will find this article helpful to learn Angular Material Card Component.

Hands-on Learning
Free Interview Books
 
+