”;
The <mat-card>, an Angular Directive, is used to create a card with material design styling and animation capabilities. It provides preset styles for the common card sections.
-
<mat-card-title> − Represents the section for title.
-
<mat-card-subtitle> − Represents the section for subtitle.
-
<mat-card-content> − Represents the section for content.
-
<mat-card-actions> − Represents the section for actions.
-
<mat-card-footer> − Represents the section for footer.
In this chapter, we will showcase the configuration required to draw a card control using Angular Material.
Create Angular Application
Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter −
| Step | Description |
|---|---|
| 1 | Create a project with a name materialApp as explained in the Angular 6 – Project Setup chapter. |
| 2 | Modify app.module.ts, app.component.ts, app.component.css and app.component.html as explained below. Keep rest of the files unchanged. |
| 3 | Compile and run the application to verify the result of the implemented logic. |
Following is the content of the modified module descriptor app.module.ts.
import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import {BrowserAnimationsModule} from ''@angular/platform-browser/animations'';
import {MatCardModule, MatButtonModule} from ''@angular/material''
import {FormsModule, ReactiveFormsModule} from ''@angular/forms'';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule, MatButtonModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Following is the content of the modified CSS file app.component.css.
.tp-card {
max-width: 400px;
}
.tp-header-image {
background-image: url(''https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg'');
background-size: cover;
}
Following is the content of the modified HTML host file app.component.html.
<mat-card class = "tp-card">
<mat-card-header>
<div mat-card-avatar class = "tp-header-image"></div>
<mat-card-title>HTML5</mat-card-title>
<mat-card-subtitle>HTML Basics</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src = "https://www.tutorialspoint.com/materialize/src/html5-mini-logo.jpg" alt = "Learn HTML5">
<mat-card-content>
<p>
HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
Result
Verify the result.
Details
- Here, we”ve created a card using mat-card.
”;