Software Developer
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.
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>
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,
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;
<mat-card> some content </mat-card>
npm install
ng serve
http://localhps:4200
By default angular project runs on port 4200, you can change it as per your need if required.
ng add @angular/material
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 {}
<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>
<!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>
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');
}