How to Use Cards in Your Angular Site With Angular Material

Angular Material helps developers create high-quality, responsive, and stylish UIs for their applications. One commonly used component is the mat-card, which is a content container for text, photos, and actions in the context of a single subject.

In this post, we’ll show you how to use the mat-card component including the mat-card-header, mat-card-title,mat-card-subtitle , and mat-card-content tags.

1. Installing Angular Material

Before you can use mat-card, you need to install Angular Material in your project. Use the Angular CLI's install command:

ng add @angular/material

2. Importing MatCardModule

Next, import the MatCardModule into your application module:

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

@NgModule({
  // ...
  imports: [
    // ...
    MatCardModule,
    // ...
  ],
  // ...
})
export class AppModule { }

3. Using <mat-card>

Now, you can start using <mat-card> in your components.

Here is a basic example:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Extra large</mat-card-subtitle>
    <img mat-card-xl-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" >
  </mat-card-header>
  
  <mat-card-content>
    <p>This is some card content.</p>
  </mat-card-content>
</mat-card>

Let’s break down what’s happening here:

4. <mat-card-header>

The <mat-card-header> tag is used to create a container for card headers. Inside this, we've included <mat-card-title> , mat-card-subtitleand img tags.

5. <mat-card-title> and <mat-card-subtitle>

The <mat-card-title> and mat-card-subtitletag is where you put your card's title and subtitle respectively.

6. <mat-card-content>

Lastly, the <mat-card-content> tag is where you put the content of your card. In our example, it's just a paragraph saying "This is some card content." You can put any valid HTML inside this tag.

And there you have it! You’ve created a simple card with Angular Material’s mat-card component. Experiment with adding more elements inside your cards to see what else you can do!

Thank you for reading. If you liked this blog, consider visiting my personal site jacobnarayan.com for more content about software engineering and web development!