Angular 10 Material Card with Image Example

Here, i will show you how to works mat card angular 10 material examples. you can understand a concept of angular 10 material multiple card examples. This post will give you simple example of angular 10 material card with image example. We will use angular 10 material card example. Alright, let’s dive into the steps.

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.

angular material "mat-card" provide following sections.

<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

angular material "mat-card-header" provide following sections.

<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

Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new newMat

Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

[ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes

Import Material Card Module

Here, we will simply import MatCardModule, MatButtonModule and BrowserAnimationsModule module for creating very simple example. so let's import on module.ts file.


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

import {MatButtonModule} from '@angular/material/button';


declarations: [



imports: [






providers: [],

bootstrap: [AppComponent]


export class AppModule { }

Example 1:

we will use matBadge for creating Card in angular app. so let's update follow html file.


<h1>Angular Material Card Example - HDTuto.com</h1>


<mat-card-title>Simple Card Example</mat-card-title>



Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Now you can see layout as like bellow:

Example 2:

Here, we will create simple example with add one button, when you click on it. it will increase number of badge. so see bellow example.


<h1>Angular Material Card Example - HDTuto.com</h1>

<mat-card class="example-card">


<div mat-card-avatar class="example-header-image"></div>

<mat-card-title>Shiba Inu</mat-card-title>

<mat-card-subtitle>Dog Breed</mat-card-subtitle>


<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">



The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally

bred for hunting.




<button mat-button>LIKE</button>

<button mat-button>SHARE</button>



Now you can see layout as like bellow:

Now you can run by bellow command:

ng serve

I hope it can help you...

September 2, 2020 | Category : Angular

Blog Search