Angular Material Card Component is a container component that holds title text, image, and action buttons to represent a single or specific subject.
Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications for creating card, badge, forms, steps, menu etc. In this example we will learn how to create step by step form in angular app using material card.
Table of Contents
Angular Material Basic card sections
Syntax :
<mat-card> </mat-card>
The most basic card needs only an <mat-card>
element with some content. However, Angular Material provides a number of preset sections that you can use inside of an <mat-card>
:
Element | Description |
---|---|
<mat-card-title> | Card title |
<mat-card-subtitle> | Card subtitle |
<mat-card-content> | Primary card content. Intended for blocks of text |
<img mat-card-image> | Card image. Stretches the image to the container width |
<mat-card-actions> | Container for buttons at the bottom of the card |
<mat-card-footer> | Section anchored to the bottom of the card |
These elements primary serve as pre-styled content containers without any additional APIs. However, the align
property on <mat-card-actions>
can be used to position the actions at the 'start'
or 'end'
of the container.
Angular Material Card headers
In addition to the aforementioned sections, <mat-card-header>
gives the ability to add a rich header to a card. This header can contain:
Element | Description |
---|---|
<mat-card-title> | A title within the header |
<mat-card-subtitle> | A subtitle within the header |
<img mat-card-avatar> | An image used as an avatar within the header |
Angular Material Card With Title and Subtitle
Apart from the basic card component without any specific sections, We can provide a Title and Subtitle as well, we can make use of the in-built selector with the card header, below you can find the syntax for the same.
Syntax :
<mat-card-title> <mat-card-title>
<mat-card-subtitle> </mat-card-subtitle>
Example 1 : Angular Material Simple-Card Example with Title and SubTitle
app.module.ts
Add the below import statement into your module file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<mat-card [style.background]="'skyblue'">
<mat-card-title> Card Title </mat-card-title>
<mat-card-subtitle> @ Subtitle</mat-card-subtitle>
</mat-card>
Output :
And you will get output something like this.

Example 2 : Angular Material Simple-Card Example
app.component.html
<mat-card>
<mat-card-title> Card Title</mat-card-title>
<mat-card-subtitle> Card Subtitle</mat-card-subtitle>
<mat-card-actions align="end">
<button mat-button=""> LIKE ❤️ </button>
<button mat-button=""> SHARE</button>
</mat-card-actions>
</mat-card>
Output :
And you will get output something like this.

Example 3 : Angular Material Card with Image Example
app.component.html
<mat-card>
<img mat-card-image="" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
<strong> A dog is a domestic mammal of the family Canidae and the order Carnivora.</strong>
Its scientific name is Canis lupus familiaris. Dogs are a subspecies of the gray wolf, and they are also related to foxes and jackals. Dogs are one of the two most ubiquitous and most popular domestic animals in the world.
</p>
</mat-card-content>
<mat-card-actions align="end">
<button mat-button="">Like ❤️</button>
<button mat-button="">share 👍</button>
</mat-card-actions>
</mat-card>
Output :
And you will get output something like this.

Title group :
<mat-card-title-group> can be used to combine a title, subtitle, and image into a single section. This element can contain:
- <mat-card-title>
- <mat-card-subtitle>
- One of :
- <img mat-card-sm-image>
- <img mat-card-md-image>
- <img mat-card-lg-image>
I hope you like this amazing article.
Also Read:
- Angular Material Grid Layout Example
- How to convert string to number in javascript or typescript
- Best websites to learn angular
- Template Reference Variables(#var) in Angular
- How to get names and values of enum in typescript
- Different ways to read Local JSON file in Angular with example
- Angular Material Date Range Picker
- What’s new in Angular 10