How to Add Angular Material to an Angular Project?

Angular Material is a very popular UI component library that is widely used in modern Angular applications.

It offers a wide range of ready-to-use UI components such as buttons, cards, dialogs, forms, navigation bars, sliders, tables, and more. These components are designed with a consistent look and feel, making it easy to create a cohesive user interface.

So, In this article, I am going to step by step explain how you can add Angular Material to your Angular application.

I am assuming that you already have an Angular project. If not, please create one using the ng new projectName command and then follow the steps mentioned below.

Step 1: Install Angular Material using ng add Command

The very first you need to do is, open the command line interface in the root directory of your Angular project and run the following command:

ng add @angular/material

After running the above command, the CLI will ask you to continue with the latest version of Angular Material. Simply type option ‘Y’ and hit Enter.

Once you hit enter, the CLI will continue installing the latest version of Angular Material. In our case, it is installing version 16.2.1. The installation process might take a few minutes to finish in the worst case.

Step 2: Choose a Prebuilt Angular Theme During Installation

Once step 1 is completed, the Angular CLI will ask you to choose a theme from Angular Materials’ prebuilt theme or you can choose a custom theme if you want.

I recommend choosing one of the prebuilt themes.

You can use the arrow keys to choose any of the themes and then simply hit Enter. I am choosing the Indigo/Pink theme.

Next, it will ask you to choose Material typography. You can choose it based on your preferences.

I don’t want to use Material typography, so I am typing N and then hitting Enter.

In the next step, it will ask you to enable animations. I recommend enabling it as it adds some cool animation to material components.

Just choose option 1 and hit enter:

Once you hit Enter, it would hardly take a few seconds and finish the installation process.

Step 3: Check if Angular Material is Successfully Installed or Not

If you follow the above steps carefully, it will successfully add the Angular Material to your Angular application.

To check if it is added correctly to your project or not, you can check the package.json file and search for @angular/material entry in the dependencies section.

If it is there, this means Angular Material is correctly added to your project.

In our case, Angular Material version 16.2.1 is added to our project.

Step 4: Import the Prebuilt Theme in the Styles.css File

To use the prebuilt theme that we chose in step 2, we need to import it at the top of the styles.css file. If you omit this step, some of the Material components such as tooltip, snackbar, etc. might not work.

So add it at the top of the styles.css file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

// Add your styles here

If you have chosen another prebuilt theme, you can replace ‘indigo-pink’ with that theme name.

Step 5: Import the Required Angular Material Modules

To use any Material component, such as a button, input, select box, etc. you have to first import its corresponding module in the app.module.ts or in any other module where you are going to use it.

For demo purpose, I want to show the Material buttons, so I have to import the MatButtonModule from ‘@angular/material/button’ library in the app.module.ts file.

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 {MatButtonModule} from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you are ready to use any of the mat-button in your application.

app.component.html

<section>
  <div class="buttons-container">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://programmersportal.com/" target="_blank">Link</a>
  </div>
</section>

Output:

As you can see, we have successfully added Angular Material to our project and used its button module to use different types of buttons.

Where to Found the Module of the Corresponding Material Component?

One of the biggest problems that beginners face while working with Angular Material is where and how to find the module of the corresponding component. I too faced this problem when I started learning Angular.

The answer is simple, Visit the official Angular Material website and then navigate to the API section of the page.

In the API section, you will find the path of the corresponding module at the top. You can simply copy it from here and add it to the app.module.ts or whatever module you want to add it to.

I recommend you visit the official Angular Material website and find all the pre-designed components. Find it here–> Official Angular Material Website

Conclusion

In this article, we learned how to add Angular Material to your Angular project and then use its pre-designed components and libraries in your application.

We also learned how to check which version of the Angular Material is added to our project using the package.json file.

That’s all for this article. Thanks for reading.