Angular Material 8 | Adding Multiple Tables on Single Component Tutorial

Angular material tables provide the fully loaded table components in which we can easily add sorting, paging, filter like features without any much codding. It works like charm in real-world applications and provides a nice user-friendly user interface.

Sometimes our component may represent more than one grid of tabular data, in that case, it becomes a bit confusing on how to add more than one Angular material tables in a single component having respective sorting and pagination components.

In this post, we will create a new Angular project and install Material’s latest version to demonstrate how we can easily put more than one Material grids in a single component.

Let’s get started!

Our Material tables will have Sorting, Pagination and Search filter for better understanding…

Create a new Angular Project

We already have installed the latest version of the NG CLI tool with version 8.3.13.
You can also update you NG CLI version by running following NPM command in your terminal:

To create a new project, run following NG command in your terminal window:

Install and Configure Material

Next, we will install Material in our Angular project by running the following command:

Then select from a few options asked after running above command:

Now we are ready with an Angular project with Material installed!

Create a new component:

To demonstrate Tables, we are going to create a new Components by running following NG command in CLI:

Update the app-routing.module.ts with updated routes object:

Note: Don’t forget to clean up app.component.html leaving only router-outlet

Add Material Tables in Project:

To create a Material table and to keep it simple we will add table elements then add Table directive components to it.

Here we added two tables with their respective template reference variables defined for Sorting and Paginator.

Following is the table template with directive components:

For adding multiple tables we need to take care of the following points:

Sorting: In table element, we need to define a template variable #TableOneSort of matSort

Pagination: On mat-paginator element also we defined a template variable #TableOnePaginator or type matPaginator

Filter: For Filter search, we have defined applyFilterOne method which can have different names for different tables.

Update App Module with Material Modules

To use material modules we need to import them in the app.module.ts file so that these can be used anywhere in the project.

Here we are using table, sorting, pagination, and filter with input field so we will import all these modules in app.module.ts file as shown below:

Update Component Class

In component class, we will define data for the table also use template reference variable for sorting and paginator for both tables.

Check out the component class code in the material-table.component.ts file below:

That’s it in above example we added two Angular Material tbales using template variables which can work saperatly without messing with eash other.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of