Getting Started With Angular Material

A lot of developers are using Angular Material in their Angular applications. But what is the best way to add the library, and why do you want to use

Table Of Contents

• What Is Angular Material?
• Why Use Angular Material?
• How To Add Angular Material?
• How To Use Angular Material?
• How To Load All Angular Material Components At Once

What Is Angular Material?

Angular Material is an Angular Component library build and maintained by Google.

It's a component library filled with a ton of easy to use Angular components. The library includes components like a datepicker, input elements, toggle switches, tables and, a lot more.

Components support customization in various ways. You can use their pre-built themes or build your own with the custom color scheme.

Why Use Angular Material?

Angular Material is updated simultaneously with Angular, which is one of the best advantages of using Angular Material and not other component libraries. Every time Google brings a new update for Angular, it will update Angular Material simultaneously.

When you update your Angular application with ng update, it will also update Angular Material simultaneously, which is pretty handy.

With Angular Material, you know for sure, as long as Google keeps developing Angular, it will stay Angular Material up-to-date.

All the components have been tested for a long time. I've been an Angular Material user for a long time, but I've never had an actual error in an Angular Material component.

But if you don't like the style of Angular Material, you can also change their styling. Picking another Angular component library is an excellent alternative if you want something different.

How To Add Angular Material?

Before installing Angular Material in an existing project, we have to make sure you installed the Angular CLI. If you haven't, run this command.

npm install -g @angular/cli

Let's start with installing Angular Material in an existing project.

ng add @angular/material

When you perform the command above, you will get a few configuration options to choose from. Make the choice you want.

After this process, you can use Angular Material in your Angular project.

How To Use Angular Material?

Angular Material components can be used by importing the module.

For example, if you want to use the checkbox component, you have to import the following module in the app.module.ts if you're going to use it in all the components across the entire application.

import {MatCheckboxModule} from '@angular/material/checkbox';

This code can be found on every component page in the API tab.

Now you can go to a component where you want to use your imported component. Check the examples tab for an example of the components and code sample's on how to use the component.

<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>

How To Load All Angular Material Components At Once

There is no default way to load all Angular Material component modules at once. I think there is a good reason for that.

You can create an Angular Module to import all the Angular Material modules and import that module in your app.module.ts.

The question is, are you going to use all the Angular Material components in your application? I don't think so because you're going to waste a whole lot of data that the user needs to download.

I think it's wiser to load the module of the Angular Material component in the Angular Module where you need it. And not load them all at once.

But if you want to do it, check out this Gist on Github which has all the available Angular Material modules for you.

Conclusion

Angular Material offers a great set of well-tested and configurable Angular components. The most significant benefit is, it's developed simultaneously by the Angular team.

I'm looking forwards to see all the projects you build with Angular Material!

Thanks!

I hope you learned something new or are inspired to create something new after reading this story! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁