We are going to divide this article into two major parts. First part will consist of creating environment files, HTTP repository service and creating a new Owner module with the lazy loading feature. As you can see, everything is Angular specific, so we won’t dive too deep into this sections. We already have Angular Series in which we have talked about these topics in great detail. So if you are not familiar with these topics, we strongly recommend reading the mentioned series.

In our source code, we can find the OwnerAccountServer folder which contains the entire .NET Core project, which we have created in .NET Core Series. In the same folder, we can find the _MySQL_Init_Script folder which contains a script to create a MySQL database with its tables. Just run that script in the MySQL database and you are ready to go.

The second part will consist of creating a material table and populating that table with data from our server. Furthermore, we are going to create the filter, sorting and paging functionalities for that table.

So, it’s time to start our job.

For the complete navigation and all the basic instructions of the Angular Material series, check out: Introduction of the Angular Material series.

The source code is available at GitHub Angular Material Table – Source Code

We are going to divide this post into several sections:

Environment, HTTP and Owner Module

Let’s start with the environment files modification.

We are going to modify the environment.prod.ts file first:

After that, let’s modify the environment.ts file:

Having these environment files modified, it is time to create a service for sending the HTTP requests towards our server.

To do that, we are going to create a service file first:

After creation, we have to modify that file:

Excellent. We have prepared our service file. If you want to learn more about environment files, services, and HTTP, you can read that in the Angular Series Article which covers all of these topics.

One more thing that we need to do is to register HttpClientModule in the app.module.ts file:

Creating a New Owner Module

Let’s create a new Owner module, and the routes for that module as well:

We are going to register this module into the main routing module but in such a way to support the lazy loading feature:

To read more about multiple modules and lazy loading in Angular, you can visit an article on the following link Lazy Loading in Angular.

Right now, we have to create a new component to show the list of all the owners from the database:

owner list component - angular material table

We need to have a routing for the components inside this module, so let’s create a new routing module for the Owner module components:

owner routing module - angular material table

And let’s modify that module file:

Finally, to make all this to work, we need to modify our routes in the sidenav-list.component.html file:

And the header.component.html file:

That is it. We can confirm now that our routing settings work as it supposed to:

routing completed - angular material table

 

Excellent. Right now, we can dedicate our work to fetch some data from the database and show them in the material table component.

Using Material Table to Display Data

Because we have created another module in our Angular app, we need to import the Material module file inside the owner.module.ts file:

Once we create the Shared module, we will fix this code repetition (MaterialModule inside the App module and Owner module).

For now, let’s continue by creating the _interface folder and inside it the owner.model.ts file:

Because we want to use the material table component, we need to register its own module in the material.module.ts file:

Then, let’s modify the owner-list.material.component file:

The mat-table element transforms this table into a material one. With the dataSource attribute, we provide a data source for our table. Inside every ng-container tag, we define the column definition and the value to be displayed. It is very important to match the matColumnDef value with the property name of our Owner interface.

Finally, in the last two tr tags, we define an order for our header columns and the row definitions. So, what we need to do right now is to create our datasource and displayedColumns properties in the ownerlist.component.ts file:

If we change the order of elements inside the displayedColumns array, it will change the order of the columns inside our table.

Right now, if we start our application and navigate to the Owner Actions menu, we are going to see a populated material table. But we are missing some styles, so let’s add those in the owner-list.component.css file:

Now we should have a better-styled table:

mat table - angular material table

Sorting Data in Material Table

We want to add the sorting functionality to our table, and for that purpose, we are going to use the matSort directive on the table tag. Moreover, we need to place the mat-sort-header directive for each header cell that will trigger sorting.

So, let’s do that now.

Modifying the table tag is going to be our first task:

Then, we are going to add the mat-sort-header directive to the Name, DateOfBirth, and Address tags:

To make sorting functionality up and running, we need to modify the owner-list.component.ts file as well:

Lastly, we need to add the MatSortModule inside of the material.module.ts file:

Now, we can check our result:

Sorting mat table

 

By default, sorting starts with ascending order first and then descending. We can change that behavior by adding the matSortStart attribute to desc next to the matSort directive:

If we don’t want to use MatTableDataSource for sorting, but to provide our own sorting logic, we can use the (matSortChange) event to receive the active sorting column and the sorting order as well:

Once we click on the name column it will generate the following JSON object:

Filter Functionality in Material Table

For this functionality, we need to provide our own input field and a custom function to filter our data. Only then, we can use MatTableDataSource’s filter property. To implement filtering, we are going to add the following code right above our table in the HTML file:

And then to write the following function in the component file:

Finally, because we are using the matInput directive to transform regular input into the material input field, we need to register its modules inside the material.module.ts file:

As we can see from the HTML file, we are using the fxLayout directive. But, because this component is part of a new Owner module, we need to import FlexLayoutModule into the Owner module file as well:

Of course, this code repetition will be solved as well as soon as we create a Shared module.

Excellent.

Now we can inspect the result:

filter mat table - angular material table

 

Paging Functionality

To implement paging with a material table, we need to use a <mat-paginator> bellow our table. So, let’s start implementation by adding MatPaginatorModule inside the Material module:

Then, let’s add mat-paginator inside the HTML file:

And finally, let’s modify the owner-list.component.ts file:

After these changes, we should have the following result:

paging - angular material table

If we want to write our custom pagination logic, we should use the (page) output event:

Conclusion

So, that’s it. Now we have our material table with all the features like sorting, paging and filtering data.

In this article, we have learned:

  • How to use Environment files, HTTP client module, and Lazy Loading feature
  • To create a material table
  • To apply sorting, filtering, and pagination to the material table

In the next article, we are going to create error pages by focusing on the material components and to create owner details component.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.