Angular material card

Angular material card:-

Angular material also provides us with one of the predominant matters that are a card, it is used to expose our textual content, pictures, snapshots on the card so essentially, it's miles used to reveal the content material within the container which makes it more presentable to the user. Material has in construct a library that can be used to build the cardboard in our software. To use a card from the material library, we require to make the adjustments and some configurations to the utility then we can use this in our application to reveal our images, photos, and text internal. Also, we will act on it. Within the coming phase of the education, we can have study the implantation, and configuration in detail for higher know-how.

Syntax

As we know that to use this inside the application we have to make configurations and then use the inbuilt tags and directive provided by the material library, let’s take a closer look at it for better understanding see below;

<mat-card>your content</mat-card>

How to use the card in Angular material?

In angular cloth we've got a card library or module we can say which permit us to create the cardboard for us, internal this we can area our content material as in line with the want, also in this section, we will have closer observe the configurations that we need to make to make this painting inner our application. Let’ get created for better understanding and clarity,

• MatCardModule: This is the primary module for cards in the fabric library, we must have this module located or gift in the application to cart the cardboard, else it'll supply us with blunders. First, we will import this in our root module or any baby module in which we want to use this. For reference please find the below code to use this in your application see below;

e.g.:

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

As you can see from the above line of code, we are trying to use the ‘MatCardModule’, this module provide us various option to design our card with different component let’s have a closer look at each of them in detail see below;

1. mat-card-title: This tag is used to provide the title for the card.
2. mat-card-subtitle: This tag is used to provide the subtitle for the card.
3. mat-card-content: This tag is used to provide the content for the card.
4. mat-card-actions: This tag is used to provide the action on the card.
5. mat-card-footer: This tag is used to provide the footer for the card.

• mat-card: It is the selector which is used to create the card using material after importing the above statement into the root file we can use this to show our card on the UI.

e.g. :

<mat-card> some content </mat-card>

• Just to make sure try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

• Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any errors or bugs inside it.

e.g. :

ng serve

• go on browser and try to run the application with the below URL :

e.g. :

http://localhps:4200

By default angular project runs on port 4200, you can change it as per your need if required.

• Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example:-

• demo.card.component.ts code:

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

/**

* @title Card demo using material

*/

@Component({

selector: 'card-demo',

templateUrl: 'demo.card.component.html',

styleUrls: ['demo.card.component.css'],

})

export class DemoMaterial {}

• demo.card.component.html code:

<h5><u><i>Demo for card using Angular material</i></u></h5>

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

<mat-card-header>

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

<mat-card-title>EDUCBA</mat-card-title>

<mat-card-subtitle>Online education provider</mat-card-subtitle>

</mat-card-header>

<img mat-card-image src="https://lh5.googleusercontent.com/p/AF1QipN_aupGaqTiv5_xbfKTl2qZz0XAJlGMt0WucgkU=w319-h100-k-no" alt="Photos of educba">

<mat-card-actions>

<button mat-stroked-button color="accent">LIKE</button>

<button mat-stroked-button color="accent">SHARE</button>

</mat-card-actions>

</mat-card>

• index.html code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

<title>Card demo using material</title>

</head>

<body class="mat-app-background">

<card-demo>Loading..</card-demo>

<span class="version-info">Current build: 12.1.1</span>

</body>

</html>

• module.tc code:

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

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

@NgModule({

exports: [

MatCardModule,

] })

export class MaterialCardDemo {}

5)  demo.card.component.css code:

.example-header-image {

background-image: url('https://lh5.googleusercontent.com/p/AF1QipN4k7WvGz9Dqg7xEssSjMpCLjkOPwOQbFDUl5sj=w203-h201-k-no');

}