Getting started with Angular Material

4 min readSep 3, 2021

Angular Material consists of a collection of Material Design components that we can easily integrate within Angular applications.

In this tutorial, you’ll learn how to install Angular Material in the easiest way.

Assuming that you have already set up an Angular project. If not, you need to first install Angular CLI (https://cli.angular.io/) and create a new Angular project using the command “ng new projectName”

Adding angular material

Great now that we are sure the application loaded, you can stop it by pressing “Ctrl + c” in the console you are running it, so we can add Angular Material to our application through the schematics.

ng add @angular/material

When you run the command, you are asked the following

The first question will ask if you want to use one of the pre-built themes or use your own, in this case, we are going to create our own theme.

The second question is to enable gesture recognition particularly helpful for mobile applications, for this HammerJS will be added to the list of libraries in the package.json and in the application configuration.

Finally, the last question is if you want to enable the angular default animations, let's leave it so we can have the full functionality for now.

For more information about the Angular material installation, you can check Getting Started Angular Material

Now open your favorite IDE or Text Editor in the application folder, I recommend using VS Code, to open it from the terminal in the current location just execute:

code .

Adding Material Components

In your IDE navigate to the file “src/app/app.module.ts”, and import the following modules:

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { FormsModule } from '@angular/forms';

And then add them to the imports array:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,    
    MatInputModule, 
    MatButtonModule,
    MatSelectModule,
    MatIconModule
  ],

Each component that you want to use requires you to import the respective module it, you can check the Angular Material documentation to know the name of the Module for each component, usually at the top of their API section.

The next step is to add some components, so go to “src/app/app.component.html” and add the following code:

Each one of the components had specific properties some of them are:

input field, that needs to be inside of the “mat-form-field”, the [(ngModel)] is to make the two-way binding with the variable title that it’s also present in the h1.
mat-icon, where you can change the icon by simply setting the inner text with any of the icons that are provided, you can find the icon list in here https://material.io/icons/
raised button, a normal button with a shadow effect.
The select is loading a list of items and creating some options from them, the list of items is declared in the class.

Navigate to the file “src/app/app.component.ts” and make sure the variables title, selectedValue, and items, are defined like in the following list.

You can check a full list of available components with code examples, and API definition on the following page: https://material.angular.io/components

Running the application

So now you have Angular and Angular material, is time to add some components and see them live, for this first go to the terminal and run the application.

ng serve

or you can use the flag — open to open your default browser:

ng serve --open

Amazing! You now have an Angular Application with some Material components. But as you might imagine there are still a lot of components to learn and configuration that can make your experience developing applications even better, for that I can recommend you to go to the following links:

Getting started with Angular Material

Adding angular material

Adding Material Components

Written by Nitin Bansode