Javatpoint Logo
Javatpoint Logo

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:

TS Code:

CSS Code:


Angular Material (MAT) Card and Paginator

MAT Paginator

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

Basic use of Paginator

  1. The number of items per page (default set 50).
  2. 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

  1. Label for each page length.
  2. Range text displayed to the user.
  3. 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:

TS Code:

CSS Code:


Angular Material (MAT) Card and Paginator
Next TopicMAT Date-picker




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA