Integrating Angular Material in Angular

Introduction

In this blog we will be learning about angular material and how do we integrate its components in the Angular Application. I will be adding MatTable to this blog.

What is Angular Material?

Angular Material is a UI component library for Angular. It provides us with an attractive range of components that help us in building the application in a faster way. These components help us in building the application in a more consistent and responsive way. The websites created by Angular Material are compatible with Android, iPhone, laptops, and tablets. It was developed by Google in 2014.

Adding Angular Material to project

First, let’s build a new angular application. Use the following command to create a new Angular Project.

ng new materialDemo

Now to add angular material into it, run the following command:

ng add @angular/material

After running this command, it will prompt you with some questions

• First will be to select a theme. You can choose any prebuilt theme name for now.
• Second, to set up global Angular Material typography styles. Typography is a way to make the text more readable and more appealing when displayed. The default font is set to Roboto but you can customize it. So you can select this option. 
• Third, it asks you to add a BrowserAnimationsModule.  You must import this module otherwise it will disable most of the Material Animations.

After successful completion of this command, you will notice the following changes in your project:

• The package.json is updated with the installed dependency. In angular.json, you can see the selected theme in the styles array.
• Roboto font and the material icons will be added to your index.html.
• Some global CSS was added to styles.scss like removing the margin from the body, set height 100%, and default application font set as Roboto.

And you are ready to use Material components.

Let us try some components to make sure it is working properly.

Let’s create another component for it. We will be displaying a mat-table.

ng g c table

Whatever module we are using we need to import it. So we will be importing MatTableModule in app.module.ts file. So, let us first import the module.

Now, first, we are defining an interface and then providing some dummy data for the table.

Then in your table.component.ts we can add this dummy data.

Now we can use the mat table to display this data.

The dataSource is used to bind the data and the matColumnDef is used for defining column names that should be unique. The matHeaderCellDef is the header cell definition for the table. Now serve the application.

You will be able to see the table.

Conclusion

In this blog, we learned what is angular material and integrated its module into angular application. You can get a complete guide to Angular material here. In the next blog, we will be learning about the theming system in Angular Material. So, stay tuned.

Also, Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Also, you can comment and tell me how I can improve my content. Feel free to share your thoughts about this blog in the comments.