Angular Material: Installation and Usage Guide

Angular Material is a popular UI component library for Angular applications, providing a set of reusable and customizable UI components. In this detailed guide, we'll walk through the process of installing Angular Material and using its components in your Angular project.

Step 1: Install Angular Material

link to this section

First, you need to install Angular Material and its dependencies in your Angular project. Open your terminal or command prompt and navigate to your Angular project directory. Then, run the following command to install Angular Material, Angular CDK (Component Dev Kit), and Angular Animations:

ng add @angular/material 

Follow the prompts to choose a pre-built theme and set up global typography and animations. Angular CLI will automatically add the necessary dependencies and configure your project to use Angular Material.

Step 2: Import Angular Material Modules

link to this section

After installing Angular Material, you need to import the required Angular Material modules into your Angular application. Open your app.module.ts file and import the necessary Angular Material modules:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MatButtonModule } from '@angular/material/button'; 
import { MatIconModule } from '@angular/material/icon'; 
// Import other Angular Material modules as needed 
import { AppComponent } from './app.component'; 

    declarations: [ AppComponent ], 
    imports: [ 
        // Add other Angular Material modules here 
    providers: [], 
    bootstrap: [AppComponent] 

export class AppModule { } 

Ensure that you import only the Angular Material modules you plan to use to keep your bundle size optimized.

Step 3: Use Angular Material Components

link to this section

Once you've imported the required Angular Material modules, you can start using Angular Material components in your Angular templates. For example, let's use the mat-button and mat-icon components in your app.component.html :

<button mat-button color="primary">Primary Button</button> 
<button mat-icon-button>

Step 4: Customize Angular Material Theme (Optional)

link to this section

You can customize the Angular Material theme to match your application's design by defining custom theme colors and typography styles. Open your styles.scss file and import the Angular Material pre-built theme file. You can then override theme variables to customize the appearance of Angular Material components.

@import '~@angular/material/theming'; 
// Define custom theme 
$custom-primary: mat-palette($mat-indigo); 
$custom-accent: mat-palette($mat-pink, A200, A100, A400); 
$custom-warn: mat-palette($mat-red); 

$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn); 

// Include custom theme 
@include angular-material-theme($custom-theme); 

Step 5: Run Your Angular Application

link to this section

Finally, run your Angular application to see Angular Material components in action. Open your terminal and run:

ng serve --open 

Your Angular application should launch in your default web browser with Angular Material components styled according to the selected theme.


link to this section

By following these steps, you can easily install Angular Material in your Angular project and start using its powerful UI components to build responsive and visually appealing web applications. Experiment with different Angular Material components and themes to create a seamless user experience in your Angular applications. Happy coding!