Angular is a development framework for JavaScript created by Google to create single-page applications (SPA). It is one of the most popular frameworks for developing modern, scalable client-side applications.

In this article we will see how to quickly create an Angular application using Angular CLI (Command Line Interface) and Angular Material, a module that allows us to work with complete and modern user interface components that work on the web, mobile, and desktop-based on Material Design. (Material Design is a set of specifications defined by Google to maintain a consistent and attractive structure on the web and mobile applications.) There are some quality Angular Material Themes available in the market to help you complete your project way faster. We will take a look at that at last.

The latest versions of Angular have improved the general functioning of the framework and allow us to use TypeScript to define our classes, properties, and methods, generating a much cleaner code.

In this post we will create an application using the latest version of Angular (from scratch) to show achievements or stories, we will create our own component, we will show variable data, we will list fixes and we will use angular material to improve the user interface.

How to use Angular Material?

Well, for this guide I am going to rely on the Angular Material library, specifically from Angular 2 onwards. There is also a material library for AngularJS but I have preferred to make this guide on the most modern versions of Angular.

When we take the practice of componentization and reuse to the extreme, we arrive at ready component libraries. These libraries provide visual elements and standard behaviors, which we can import into our application and use them, without having to worry about HTML templates and CSS styles. In the Angular Universe, one of the most used libraries is Angular Material.

Installing and Configuring Angular Material

In order for us to use Angular Material, we will obviously need an Angular application. We will also need a configured Angular development environment. If you are new to Angular, I recommend taking a look at the article for preparing the Angular development environment and the series of first steps on Angular:

Using npm, the NodeJS package manager, which we installed in the environment preparation, we will install three packages: the Angular Material components, the CDK, and the library animations.

With the packages installed, we will need to import the animation module, used internally by the Angular Material essential for the correct functioning of the components, into our application. To do this, in the app.modules.ts file, just add the animation module to the imports array :

Each component of Angular Material has its own module. That way, whenever we need to use a component, we will need to add it to the import array of the app.module.ts file, as we will see later.

The next step is to add a Material Design theme to our application. This can be done by importing the .css theme into our application’s styles.css file. Currently, Angular Material has four themes ready:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Navigation Components

Angular Material provides three components widely used in any application: toolbar, menu, and sidenav. The first, toolbar, is a container for titles, headers, and buttons. The second, menu, allows the creation of dropdown menus and submenus. The latter, sidenav, is a side menu widely used in responsive interfaces and mobile applications.

Best Angular Material Template

MaterialPro Angular Material Template is a powerful dashboard template based on Google’s Material Design and Angular Material Framework. It comes with some stunning dashboard variations, which can help you to create your own unique dashboard page. It also includes a number of page templates, which will help you to create required pages for your admin panel with ease. You will always see a variety of forms, tables, charts and widgets included in the package. Once you purchase this stunning theme, you don’t need to look anywhere. This will be the best angular material theme.

Conclusions

I hope you liked this article, and above all, this Angular Material tutorial. As you have seen, it is a very complete library that means that many of the things do not have to be assembled by you. If for example, you want to build a small application, this library is ideal for that. With this library you don’t have to use Bootstrap, it already gives you all the necessary styles to get a decent page.

I am one of those who think that it is much better for everyone to assemble their own set of components ready for their needs since you have total control of everything that happens with the components.

This article is not intended to be an in-depth guide to everything that this material design library can offer, but it is helpful for all those who want to know how to use Angular Material. I encourage you to enter the official documentation so that you see everything that can be done.