Angular Material (MAT) Card and Paginator

What is the MAT Card?

<mat-card> is a content container for works, photos, and text about a subject.

Basic card sections

Basic card requires only the <mat-card> element with only some content. Although, it provides several preset sections that you can use inside <mat-card>:

S. No	Element	Description
1.	<mat-card-title>	Title of the card
2.	<mat-card-subtitle>	Subtitle of the card
3.	<mat-card-content>	It represents the section for content
4.	<img mat-card-image>	Card image
5.	<mat-card-actions>	It represents the section for actions
6.	<mat-card-footer>	It represents the section for footer

<mat-card> works as pre-styled content without any additional APIs. Although, the align property can be used to perform actions at the ‘start’ or ‘end’ of a <mat-card-actions> container.

Card headers

The card header gives the ability to add a rich header to a card section. The header can contain all of these sections:

S. No	Element	Description
1.	<mat-card-title>	A title within the header
2.	<mat-card-subtitle>	A subtitle within the header
3.	<img mat-card-avatar>	An image used as an avatar within the header

API reference for Angular Material card

Example: Card with multiple sections

HTML Code:

  <mat-card class = “example”>    <mat-card-header>      <div mat-card-avatar class = ” header-image “> </div>      <mat-card-title> Features of Java </mat-card-title>      <mat-card-subtitle> There are following type of features </mat-card-subtitle>    </mat-card-header>    <img mat-card-image src = ?https://tutoraspire.com/wp-content/static/images/core/java-features.png? alt=”JAVA”>    <mat-card-content>      <p>        This image shows the features of the JAVA      </p>    </mat-card-content>    <mat-card-actions>      <button mat-button> LIKE </button>      <button mat-button> Comment </button>    </mat-card-actions>  </mat-card>  

TS Code:

  import {Component} from ‘@angular/core’;    /**   * @title Card with multiple sections   */  @Component({    selector: ‘card-fancy-example’,    templateUrl: ‘card-fancy-example.html’,    styleUrls: [‘card-fancy-example.css’],  })  export class CardFancyExample {}  

CSS Code:

  .example-card {    max-width: 500px;  }    .example-header-image {    background-image: url(“https://tutoraspire.com/wp-content/static/images/core/java-features.png”);    background-size: cover;  }  

MAT Paginator

<mat-paginator> provides navigation for page information, which is commonly used along with the table.

Basic use of Paginator

The number of items per page (default set 50).
The total number of items.

The default value of the page index is 0, but it can be explicitly set via pageIndex. When the user interacts with Paginator, the PageEvent is fired because that PageEvent is used to update any related data views.

Page size options

It helps the user to display a dropdown page to select the option. This option can be set with the help of PageSize options.

It allows you to change the following controls

Label for each page length.
Range text displayed to the user.
Tooltip message on the navigation button

Accessibility

The aria-labels can be set for the first page, last page, previous page, and next page buttons in the <mat-Paginator>.

API reference for Angular Material paginator

Example of Configurable paginator

HTML Code:

  <mat-form-field>    <mat-label> List length </mat-label>    <input matInput [(ngModel)] = “length” type = “number”>  </mat-form-field>    <mat-form-field>    <mat-label> Page size </mat-label>    <input matInput [(ngModel)] = “pageSize” type = “number”>  </mat-form-field>    <mat-form-field>    <mat-label> Page size options </mat-label>    <input matInput [ngModel] = “pageSizeOptions” (ngModelChange) = “setPageSizeOptions($event)”           [ngModelOptions] = “{updateOn: ‘blur’}” placeholder = “Ex. 10,25,50”>  </mat-form-field>    <mat-paginator [length] = “length”                 [pageSize] = “pageSize”                 [pageSizeOptions] = “pageSizeOptions”                 (page) = “pageEvent = $event”>  </mat-paginator>    <div *ngIf = “pageEvent”>    <h5> Page Change Event Properties </h5>    <div> List length: {{pageEvent.length}} </div>    <div>Page size: {{pageEvent.pageSize}}</div>    <div>Page index: {{pageEvent.pageIndex}}</div>  </div>  

TS Code:

  import {Component} from ‘@angular/core’;  import {PageEvent} from ‘@angular/material/paginator’;    /**   * @title Paginator Configurable   */  @Component({    selector: ‘ example of Paginator Configurable ‘,    templateUrl: ‘ configurable- paginator.html ‘,    styleUrls: [‘ configurable- paginator.css ‘],  })  export class ConfigurablePaginatorExample {    // Input of MatPaginator    lengthOfpage = 250;    pageSize = 20;    pageSizeOptions: number[] = [10, 20, 35, 100];      // Output of MatPaginator    pageEvent: PageEvent;      setPageSizeOptions(setPageSizeOptionsInput: string) {      if (setPageSizeOptionsInput) {        this.pageSizeOptions=setPageSizeOptionsInput.split(‘,’).map(str=>+str);      }    }  }  

CSS Code:

Next TopicMAT Date-picker

Angular Material (MAT) Card and Paginator

Angular Material (MAT) Card and Paginator

What is the MAT Card?

MAT Paginator

struts 2 iterator tag example

AT and T Full Form

You may also like