Angular Material is a collection of Material Design components for an Angular app. You can apply Material Design by using these components very easily. Angular Material became very easy with the release of Angular 6. Here, we will work on Angular Material with Angular 7.
Here is the link to Angular Material: https://material.angular.io/

Angular Material Table (mat-table)
In this blog, we are going to learn about Angular Material Table, that ismat-table
mat-table
provides a Material Design styled data-table that can be used to display rows of data.
Setting Up The Angular 7 Project
we are going to use Angular 7 project to work with Angular Material Table component. If you are still working on Angular 6, and wants to upgrade your Angular CLI to Angular 7, here is the below link to upgrade from Angular 6 to Angular 7.
Also, here is the link to create your first app in Angular 7 as well.
Let’s create our Angular 7 Material app using this command.
[crayon-5fdb0239f3b6d994291589/]In this example, angularmat
is our project name. A new project folder is created, the Angular project template is downloaded and the needed dependencies are installed. Once everything is set up, and now you are ready to run your application by using this command.

Now, it’s a time to add Angular Material dependencies in our project.
1. Install Angular Material, Angular CDK And Angular Animations To Angular Project
You can use the npm command to install Angular Material, Angular CDK and Angular Animations to your project.
[crayon-5fdb0239f3b79988741010/]2. Configure Animation By Importing BrowserAnimationsModule
Once the above packages have been installed in your app, the next step is to configure the animation by BrowserAnimationsModule
app.module.ts
app.module.ts
3. Importing Angular Material Theme
It is required to importing the Angular Material theme in your project. Open your project’s filestyles.css
, and add this line.
styles.css
[crayon-5fdb0239f3b7b088038218/]4. Adding Angular Material Icons (optional)
You can use Angular Material Icons in your project. Here is the official link of Material Design Icons. Open index.html
index.html
[crayon-5fdb0239f3b7d200953021/]5. Import Angular Material Table (MatTableModule)
Now, in order to use Angular Material Table, you have to import MatTableModule
app.module.ts
file, and import this statement.
6. Create Mat-Table Data For Display
To display data in our mat-table, let’s first create our sample data interface and populate the data. I am going to create an EmployeeData
Adding the array constants of employee’s names and their favorite colors. The getEmployees
()
function will return the full employee data to display.
7. Bind Data to Mat-Table
Once you have MatTableDataSource
app.component.ts
import { MatTableDataSource } from ‘@angular/material’;
Fill the
array with the name of columns to be displayed in our table. Also, mention EmployeeData
to our mat-table
data source property.
7.1 Create mat-table and bind data
Next step to create our mat-table
component. Here is the syntax of data binding in our app.component.html file.
Write your mat-table
and bind the [dataSource]
property to it.
This is the simple form of binding data to mat-table. The table will take the array and render a row for each object in the data array.
7.2 Creating the column template
After creating mat-table
[dataSource]
Each column should have a unique column name and it will contain the contents of its header and row cells.
In the above sample, we have given the unique "Id"
matColumnDef
ng-container
mat-header-cell
ID
{{row.Id}}
mat-cell
So the complete column bindings will be like this:
7.3 Defining the row template
In the last step, we have to define displayedColumn
in our component class file.
displayedColumns: string[] = [‘Id’, ‘EmpName’, ‘Color’, ‘Hours’];
Add these two lines at the bottom of your mat-table tag to specify, which columns we are going to show.
so the complete html template will be like this.
Now, it is the time to run your app and see the data in mat-table
ng serve --open
in your terminal.

Till now, we have implemented our mat-table
mat-table
, that is, pagination.
8. Mat-Table Pagination
mat-paginator
is used to provide pagination with mat-table
- The number of items per page (default is 50)
- Total number of items being paged
The paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via pageSizeOptions
The current pageSize will always appear in the dropdown, even if it is not included in
.
To implement the pagination, first of all, import MatPaginatorModule
MatPaginatorModule
imports[]
app.module.ts
Let’s implement the MatPaginator
in our app.component.ts file.
app.component.ts
Also, place <mat-paginator>
element on app.component.html file as well.
app.component.html
<mat-paginator [pageSizeOptions]=”[5, 10, 25, 100]”></mat-paginator>
Let me explain you about this pagination control. First of all, we ViewChild
MatPaginator
MatPaginator
@ViewChild(MatPaginator)
ngOnInit()
datasource
Don’t forget to <mat-paginator>
[pageSizeOptions]

9. Mat-Table Sorting
In this step, we are going to implement MatSortModule
import[]
array as well.
app.module.ts
Now, go to the app.component.html file, matSort
<table mat-table>
mat-sort-header
mat-sort-header
<th mat-header-cell>
app.component.html
Notice carefully, where we have added matSort
to <table>..</table> and mat-sort-header
to <th>..</th> of each column.
Now, move to app.component.ts file, and implement the sorting over there as well.
app.component.ts
Let me explain this, first of all, we have MatSort
@ViewChild(MatSort)
MatSort
sort
datasource
sort

Look at the table headers, you will header a sort arrow on each on mouse hover. In this picture, I sorted Employee Name, and you can an arrow on this column as well.
10. Mat-Table Filtering
In this last point, I am going to show you how to filter your mat-table
.
First of all, import these statement in your app.module.ts file, and add MatFormFieldModule
and MatInputModule
in imports[]
app.module.ts
import {MatFormFieldModule} from ‘@angular/material/form-field’;
import {MatInputModule} from ‘@angular/material/input’;
After importing matInput
app.component.html
I have bind an applyFilter()
matInput
applyFilter()
app.component.ts

applyFilter()
property to filter mat-table
paginator
Download
You can download the complete project from Github.
Summary
In this tutorial, we learned about how to install Angular Material in our Angular app. Then how we can use Mat-Table to display the tabular data. I also demonstrate common features of any data grid like Pagination, Sorting
Further Reading
Pingback: itemprop="name">Angular Material Table With Paging, Sorting And Filtering – ZeptoBook – Angular Questions
Pingback: itemprop="name">Stop Using ElementRef! For DOM Manipulation In Angular - ZeptoBook