Angular Material: Installation and Usage Guide

Step 1: Install Angular Material

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:

codeng 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

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:

codeimport { 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'; 

@NgModule({ 
    declarations: [ AppComponent ], 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        MatButtonModule, 
        MatIconModule, 
        // 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

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 :

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

Step 4: Customize Angular Material Theme (Optional)

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.

code@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

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

codeng serve --open 

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

Conclusion

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!