An image

Corporate Blogs

Angular Material: Build Your Own Generic MatTable

E-Commerce Businesses Need a Mobile App

Angular Material is used to display rows of data and styled data tables. The Angular Material Data Table component is a generic component for displaying tabulated data. We can easily give it the finest look and feel with the material design. 

MatTable is built on the foundation of the Component Dev Kit (CDK) data-table and uses a similar interface for its data input and template. Its element and attribute selectors are prefixed with mat- instead of CDK. The use of CDK is a library of predefined behaviors included in Angular Material, a UI component library for Angular developers and CDK contains reusable logics for many features. Let’s discuss how you can create your own generic MatTable with Angular components.

Angular Material Table

Install an Angular 8, we are using Angular CLI Version 8 for this tutorial demonstration. If you’re new to Angular, I recommend you to follow these steps with Angular  8.

Install Angular 8

Type the following command to install Angular. 

install -g @angular/cli

Now, generate the Angular project using this command below.

ng new mat-table-example

Install Angular Material Libraries

Now, install Angular Material and Angular Animations using the following command.

npm install –save @angular/material @angular/animations @angular/cdk

Go inside the project folder and install the Hammer.js using the following command.

npm install –save hammerjs

Hammer.js is an optional dependency and helps with touch support for the components. You should include Hammer.js inside an angular.json file. Now, you will be able to find this file on the root of this Angular project.

Import a pre-built theme and Material Icons

Angular Material comes with some pre-built themes, colors and basic styles. Some of the default themes are indigo-pink, deep-purple-amber, purple-green, and pink-blue-grey. To import the theme in our project, we can add the following code to your global styles.css file. The file is inside the src folder.

@import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;

Now we need to import Angular Material modules and BrowserAnimationsModule files inside the app.module.ts file.

MatTable Module

Angular Material is used to display rows of data. It also provides an Angular Material design with a styled data table. You should write the following code inside the app.component.ts file to import the MatTable module.

Here, we have defined the PeriodicElement interface with the four variables. It is a model that has its properties with the datatypes.

Inside the app.component.css file, we can write the CSS code.

Finally, write the HTML code inside the app.component.html file.

Save a file and run the following command to look at the final result.
ng serve
Angular material table

Also Read: How to Cache HTTP Requests In Angular

Conclusion

I hope this Angular 8 material Table tutorial was useful for you. We can expand the data table with more features such as pagination, sorting, filtering, searching, and add all possible features with the help of the Angular Material table.

Happy learning!

Have some love for Angular? Be a well informed on all Angular updated by subscribing to the weekly newsletter.  Fill the form and become a subscriber to access more exclusive updates on Angular and other development technologies.

Wondering Angular is the one for your Project? Talk to our technology experts today to find the high compatible framework for your development project.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
Professional Life of an IT Consultant Interview with Valentin Crettaz
Written by
Junior software developer. She specializes in Java, Angular, JavaScript, Jquery, HTML and CSS. A chilled out tech enthusiast who is thriving to be the best on what she does. She enjoys playing video games and some pleasant music when she is not coding.

Leave a Comment


You have an Idea. We have the Solution.

We help business evolve with lates technologies and infrastructures tailored to their needs and market trends.