<mat-card> in Angular Material

Last Updated : 11 Jan, 2021

Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.

Installation syntax:

ng add @angular/material

Explanation:

<mat-card> is a content container that can be used for inserting text, photos, and actions in the context of the subject.

In Angular Material <mat-card> has many properties that we can use to build simple cards. These properties can be easily integrated, and we can code cards in an easier way. The below table has all the properties that are present in an elaborative way.

Element Name	Description of the Element
<mat-card-title>	Title of the respective card
<mat-card-subtitle>	The subtitle of the respective card
<mat-card-content>	All the data and information which is the body of the card needs to be written in this section.
<mat-card-actions>	This tag is used to mention all the events like submit, cancel and etc to be written in the card.
<mat-card-header>	It is used to mention all the details on the header of the card like title, subtitle etc.

Approach:

First, install the angular material using the above-mentioned command.
After completing the installation, Import ‘MatCardModule’ from ‘@angular/material/card’ in the app.module.ts file.
Now use the above tags mentioned in the table and code a card.
Make sure that every tag is present within the opening(<mat-card>) and closing(</mat-card>) tags.
If you are using <mat-button> then make sure that you are importing ‘MatButtonModule’ too.
Once done with the above steps then start the project.

Code Implementation:

app.module.ts:

Javascript

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { FormsModule } from '@angular/forms';  
    
import { AppComponent } from './app.component';  
import { MatCardModule} from '@angular/material/card';   
import { MatButtonModule} from '@angular/material/button';   
    
@NgModule({  
  imports:  
  [ BrowserModule,   
    FormsModule, 
    MatCardModule, 
    MatButtonModule 
 ],  
  declarations: [ AppComponent ],  
  bootstrap:    [ AppComponent ]  
})  
export class AppModule { }

app.component.css:

p {
font-family: Lato;
}

.example-card {
max-width: 500px;
margin: 4px
}

mat-card-subtitle{
font-size:30px
}

mat-card-title{
color:green;
font-size:40px
}

app.component.html:

HTML

<mat-card class="example-card"> 
    <mat-card-header> 
        <mat-card-title>GeeksForGeeks</mat-card-title> 
        <mat-card-subtitle> 
            One stop solution for all CS Subjects 
        </mat-card-subtitle> 
    </mat-card-header> 
  
    <mat-card-content> 
        <p> 
            With the idea of imparting programming  
            knowledge, Mr. Sandeep Jain, an IIT Roorkee  
            alumnus started a dream, GeeksforGeeks.  
            Whether programming excites you or you feel  
            stifled, wondering how to prepare for  
            interview questions or how to ace data  
            structures and algorithms, GeeksforGeeks  
            is a one-stop solution. With every tick of  
            time, we are adding arrows in our quiver. 
            From articles on various computer science  
            subjects to programming problems for practice, 
            from basic to premium courses, from technologies 
            to entrance examinations, we have been building 
            ample content with superior quality. In a short 
            span, we have built a community of 1 Million+  
            Geeks around the world, 20,000+ Contributors and 
            500+ Campus Ambassador in various colleges across 
            the nation. Our success stories include a lot of 
            students who benefitted in their placements and  
            landed jobs at tech giants. Our vision is to  
            build a gigantic network of geeks and we are  
            only a fraction of it yet. 
        </p> 
    </mat-card-content> 
  
    <mat-card-actions> 
        <button mat-button style= 
            "background-color:blue; color:white"> 
            LIKE 
        </button> 
  
        <button mat-button style= 
            "background-color:green; color:white"> 
            SHARE 
        </button> 
    </mat-card-actions> 
</mat-card> 

app.component.ts:

Javascript

import { Component } from '@angular/core'; 
  
@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent  { 
} 

Output:

My Personal Notes

Related Articles

Javascript

HTML

Javascript