Angular material card

Introduction to Angular material card

Angular material also provide us one of the main things which are card, it is used to show our text, photo, images on the card so basically, it is used to show the content inside the container which m it more presentable to the user. Material has in build a library that can be used to build the card in our application. In order to use a card from the material library, we require to make the changes and a few configurations to the application then we can use this in our application to show our images, photos, and text inside it. also, we can perform an action inside it. In the coming section of the tutorial, we will have look at the implantation, and configuration in detail for better understanding.

Syntax

As we know that in order 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>

As you can see in the above piece of syntax, we are using ‘mat-card’ here, we can use this to show ours represent our text or content we have inside the card container. Let’ take look at the practice syntax;

e.g. :

<mat-card> My Text </mat-card>

How to use card in Angular material?

In Angular material we have a card library or module we can say which enable us to create the card for us, inside this we can place our content as per the need, also in this section, we will have closer look at the configurations that we need to make in order to make this work inside our application. Let’ sget srated for better understanding and clarity,

1) MatCardModule: This is the main module for cards in the material library, we have to have this module place or present inside the application in order to cart the card, else it will give us an error. First we will import this in our root module or any child module in which we want to use this. for reference please find the below code in order 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. a) mat-card-title : This tag is used to provide the title for the card.
2. b) mat-card-subtitle : This tag is used to provide the sub title for the card.
3. c) mat-card-content : This tag is used to provide the content for the card.
4. d) mat-card-actions : This tag is used to provide the action on the card.
5. e) mat-card-footer : This tag is used to provide the footer for the card.

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

Now let’s get started with the steps that needs to be taken in order to step up our angular material project initially for beginners see below;

1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli) The above command will install the CLI globally in our system hence we can use it globally when required.

3) Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your command Promat and press enter see below;

e.g. :

ng new your project name
>> ng new my-first-project

This command will create the project with the name my-first-project, you can create your project with any name mentioned.

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

e.g. :

npm install

5) 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 error or bugs inside it.

e.g. :

ng serve

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

e.g. :

http://localhps:4200

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

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

1) 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 {}

2) 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-content>
<p>

eduCBA is an online education provider, teaches you real world skill on everything from Investment Banking to Programming to Project Management to Design & many more.

</p>
</mat-card-content>
<mat-card-actions>
<button mat-stroked-button color="accent">LIKE</button>
<button mat-stroked-button color="accent">SHARE</button>
</mat-card-actions>
</mat-card>

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

4) 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');
}

Output :

Conclusion – Angular material card

By the use of this, we can directly put our content inside the card, also material provide us default styling and designing which makes it more presentable to the user. It is very easy to use, handle, and maintained by the developers as well.

Recommended Articles

This is a guide to Angular material card. Here we discuss the implantation, and configuration in detail for more better understanding. You may also have a look at the following articles to learn more –

1. Angular Material Icons
2. Angular 7 Features
3. Angular 7 Form Validations
4. AngularJS ng-model