Hello Devs,

In this tutorial, we are going to learn how to work mat card angular 10 material examples.

This post will give you simple example of angular 10 material card with image example. We will use angular 10 material card example. 

Follow this step by step guide given below:




Create New App

ng new newMat



Add Material Design

ng add @angular/material
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

src/app/app.module.ts

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';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatCardModule,

    MatButtonModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Example 1:

src/app/app.component.html

<h1>Angular Material Card Example - Rathorji.in</h1>

  

<mat-card>

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

  <mat-card-content>

    <p>

      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.

    </p>

  </mat-card-content>

</mat-card>


Example 2:

src/app/app.component.html

<h1>Angular Material Card Example - Rathorji.in</h1>

  

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

  <mat-card-header>

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

  </mat-card-header>

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

  <mat-card-content>

    <p>

      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.

    </p>

  </mat-card-content>

  <mat-card-actions>

    <button mat-button>LIKE</button>

    <button mat-button>SHARE</button>

  </mat-card-actions>

</mat-card>


Run this command:

ng serve


I hope this example helps you.