How to configure and install Angular Material in Angular 11?

In Angular, we can use different UI libraries, but Angular Material is one of the best UI component libraries that are made specifically for Angular. Angular Materials provide the developer with reusable UI components that help the developer to use ready-made components, fast development, and one best UI design.

In this tutorial, we have two important goals. First, how to install angular material and step need to configure angular material in our angular project. Second will demonstrate how to reuse Angular material components in our project.

What is Angular material ?

Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification developed by Google in 2014. Material Design is a tool for front-end frameworks, which helps you with visual, motion, and interaction design. It also helps to adopt or provide responsive design to different devices and different screen sizes. The project provides a set of reusable, well-tested, and accessible UI components based on Material Design. These components help in making your application more consistent, fast, versatile, and even design responsive websites. We can also use a popular UI framework like the Bootstrap component in our angular project.

Steps to install Angular Material ?

To used Angular material in our angular project, we need to set up the environment for Angular. We need Nodejs to install the dependency package in our angular project using the npm command. We discuss detail later need the following brief steps to install Angular Material libraries.

  • Install Nodejs in our system.
  • Install the Angular CLI
  • Create a workspace for Angular Project
  • Add Angular Material
  • Import the Angular Material modules

Step 1: Installing Nodejs and Angular Cli

We have a tutorial on how to install Node js and angular CLI in the Ubuntu operating system. We have to install Angular Cli globally using.

npm install -g @angular/cli

Once both Nodejs and angular CLI are ready then next we need to create an angular project.

Angular version
ng new angularMatEx

Step 2: How to add and install Angular Material in our project

To add Angular material to our project we need to execute the following command in the console. This command will install the Angular material, the Component Dev Kit (CDK), and the Angular animations libraries. There are two ways to install angular material based on the Angular Devkit version.

Installing Angular material in Angular Devkit 6 and higher

If you are using Angular devkit 6 and higher, then there is one step to install Angular material on our project. You don’t need to run any other commands.

ng add @angular/material

In the early version of angular material, we need to install angular material and angular animation separately and also manually need to import BrowserAnimationModule in the app.module.ts file. But now add command install and import all above tasks automatically to our angular project. We only need to run add Angular material command and it will ask the developer the following questions to determine which features to include. Here is a screenshot of the choice we had taken for configuring Angular material in our project.

Install angular material

We have selected an Indigo/Pink material theme, Angular material provides few prebuilt theme options for us. We have listed options provide by adding angular material in our project

  • Choose a prebuilt theme name, or “custom” for a custom theme.
  • Set up global Angular Material typography styles and type yes.
  • Set up browser animations for Angular Material and type yes.

Once we have executed ng add material, it will add BrowserAnimationModule in the app.module.ts file. We need this module to add animation for Angular material animation.

@NgModule({ 
  imports: [BrowserAnimationsModule],
})

export class AppModule { }

The ng add command will additionally perform the following configurations in our Angular application:

  • Add project dependencies to package.json
  • Add the Material Design icon font to your index.html
  • Add the Roboto font to your index.html
  • Add a few global CSS styles to remove margin from body, set 100% to html and body, make roboto as default fonts for our applicaton.

Now we have done with Angular material configuration and let add any Angular material component in our Angular application.

Installing Angular material in Angular Devkit below 6 ?

The angular team has release Angular version 12, you can skip this section. But in case if you are using the Angular version below the 6 then follow these steps.

Install Angular Material, Angular CDK, and Angular Animations

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

Configure browser animations module in the app.module.ts file.

@NgModule({ imports: [BrowserAnimationsModule], }) export class AppModule { }  

Step 3: Import the Angular Material component modules

Angular material provides lots of built-in components that are ready to use. To use specific Angular material components, we need to import each material component separately. Let’s edit app.module.ts to add require Angular material module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatButtonModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you are using many Angular material components, then it is best and good practice to make separate modules for Angular material components. Let create a file called the ng-material.module.ts file to add our previous example material module. Here we need to do three tasks.

  1. To import Angular material component.
  2. To export Angular materila component so that we can used it in our project.
  3. Import our material module in our app.module.ts file.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBarModule } from '@angular/material/snack-bar';

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        MatSnackBarModule,
        MatFormFieldModule,
        MatButtonModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule
    ],
    exports: [
        CommonModule,
        MatSnackBarModule,
        MatFormFieldModule,
        MatButtonModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule
    ]
})
export class NgMaterialModule { }

If you have any other Angular material then import it into our material module, this will make our code cleaner and easy to read. Let now import our custom Angular material module in the app.module.ts file.

...
import { NgMaterialModule } from './ng-material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ....
    NgMaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

An example of Angular material component in an Angular

Angular Material offers a wide variety of UI components based on the Material Design specification. We can add and select what we needed from the Angular material component. Here are some of the Angular material components.

  • Material Table component
  • Toolbar component
  • Grid list material Component
  • Material paginator
  • Material slider
  • Angular material Icon

And more, Angular material provides lots of prebuilt components that are ready to use.

How to used Angular material components ?

Here we’ll demonstrate a few examples of angular material like material date picker, buttons and form field, etc. To use each Angular material component, we should import their relevant module into the app.module.ts file for instance. Here is a screenshot of our example of Angular material components in our application.

Angular material components example

To edit app.component.ts to import MatSnackBar component in our app.component.ts file.

import { Component } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private _snackBar: MatSnackBar) { }

  openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action, {
      duration: 2000,
    });
  }
}

In the app.component.html template, add the material form field, material datapicker in our template.

<div class="container">
  <mat-form-field>
    <mat-label>Message</mat-label>
    <input matInput value="Disco party!" #message>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Action</mat-label>
    <input matInput value="Dance" #action>
  </mat-form-field>

  <button mat-flat-button color="primary" (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>

  <div>
    <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input matInput [matDatepicker]="picker">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>
</div>

<router-outlet></router-outlet><

How to change Angular material themes

Angular material has four themes by default, when we are adding the material library to our Angular project we have to select one theme. We can change the material theme at any time and we have selected an indigo-pink theme. We can change it to another theme, let open node_modules/material/prebuilt-theme we can see all four themes.

Angular material theme

In the angular.json file, we have a styles array contenting the list of all styles. We only need to change the material theme name only, as we have changed it from an indigo-pink to the purple-green theme.

Conclusion
In this article, we have explored how to install angular material in our application. Also, demonstrate how to use a few ready-made angular material components in our example. I hope that this article was able to get you up and running with Angular material.

Related Articles

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top