Angular Material Tutorial: Install & Use UI Components

In the previous lesson, we covered NgRx for state management, which helps manage app data in a structured way. Now, we’ll shift focus to Angular Material, a UI library that gives your app a polished look with ready-made components like buttons, forms, and dialogs.

I remember working on a project where the client wanted a clean, modern UI without writing custom CSS. Angular Material saved me hours of work by providing pre-built components that follow Google’s Material Design guidelines. If you’re new to Angular Material, this guide will help you install and use it efficiently.

Why Use Angular Material?

Angular Material offers pre-designed UI components that speed up development. Instead of styling buttons, forms, or tables from scratch, you can use built-in components that work well on all devices.

For example, I once built a dashboard that needed a responsive data table. Writing custom CSS and JavaScript for sorting and pagination would have taken days. But with Angular Material’s <mat-table>, I had a fully functional table in minutes.

Install Angular Material

To install Angular Material, open your Angular project in the terminal and run ng add @angular/material. This command sets up Material Design styles, adds required dependencies, and prompts you to choose a theme (like Indigo/Pink). Once installed, import the needed modules (e.g., MatButtonModule) in your app.module.ts to start using pre-styled UI components like buttons, inputs, and dialogs.

ng add @angular/material

This command installs Angular Material and sets up basic styles. You’ll be asked to:

• Choose a prebuilt theme (like Indigo/Pink).

• Set up HammerJS (for gestures).

• Include Angular animations (recommended).

Once installed, import the needed modules in app.module.ts:

import { MatButtonModule } from '@angular/material/button';  
import { MatInputModule } from '@angular/material/input';  

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

Using Material Components

Angular Material provides ready-to-use UI elements like buttons, forms, tables, and dialogs that follow Material Design guidelines. To use them, first import the required modules (e.g., MatButtonModule, MatInputModule) in your app.module.ts. Then, simply add Material directives like mat-button or matInput to your HTML—no extra CSS needed. For example, <button mat-raised-button>Click Me</button> creates a styled button with a ripple effect. These components save time, ensure consistency, and work seamlessly across devices.

Angular Material Buttons

Angular Material provides styled buttons with built-in ripple effects for better user interaction. You can use different button types like mat-button, mat-raised-button, or mat-icon-button, and customize them with colors (primary, accent, warn).

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

These buttons save time by eliminating manual styling while keeping your UI consistent with Material Design.

Angular Material Form Controls

Angular Material provides easy-to-use form controls like inputs, checkboxes, and selects that follow Material Design. For example, <mat-form-field> wraps an input with a floating label and error handling, making forms look clean without extra CSS. You can control validation, hints, and styling with simple directives like matInput and mat-error. These components save time and ensure a consistent user experience.

<mat-form-field>  
  <input matInput placeholder="Name">  
</mat-form-field>  

Angular Material Tables

Angular Material’s mat-table provides an easy way to display structured data with built-in features like sorting, pagination, and responsive layouts. Instead of writing complex HTML and CSS for tables, you can use Material’s pre-styled components, which automatically adjust to different screen sizes. For example, a simple data table can be set up with just a few lines of code, where columns are defined using <ng-container> and data binding. This saves time and ensures a consistent, professional look across your app. Whether you’re showing user lists or product details, <mat-table> makes data presentation clean and efficient.

<table mat-table [dataSource]="data">  
  <ng-container matColumnDef="name">  
    <th mat-header-cell *matHeaderCellDef>Name</th>  
    <td mat-cell *matCellDef="let row">{{row.name}}</td>  
  </ng-container>  
  <!-- Add more columns -->  
</table>  

Angular Material Dialogs

Angular Material dialogs are pop-up windows that help display alerts, forms, or messages without navigating away from the page. To use them, first import MatDialogModule and create a component for the dialog content. Then, open it using MatDialog’s open() method.

constructor(public dialog: MatDialog) {}  

openDialog() {  
  this.dialog.open(MyDialogComponent);  
}  

Customizing Angular Themes

Angular Material lets you customize colors and styles using Sass. You can define your own theme by setting primary, accent, and warning colors in styles.scss. For example, if you want a dark theme, you can use mat-dark-theme() instead of mat-light-theme(). This makes it easy to match your app’s branding without writing extra CSS. Just import the theming module, set your palette, and apply the theme globally—your buttons, inputs, and other components will automatically update.

You can modify colors in styles.scss:

@import '~@angular/material/theming';  
@include mat-core();  

$my-primary: mat-palette($mat-indigo);  
$my-accent: mat-palette($mat-pink);  
$my-theme: mat-light-theme($my-primary, $my-accent);  

@include angular-material-theme($my-theme);  

Fixing Common Issues

Sometimes, Angular Material components may not work as expected. If styles don’t load, check if you imported the right module (like MatButtonModule for buttons). Another issue could be missing dependencies—ensure @angular/animations is installed if using dialogs or tooltips. If a component isn’t rendering, verify it’s correctly declared in your module. Most problems are fixed by checking imports and dependencies.

Conclusion

n this Angular Material tutorial, we walked through the essential steps to install and integrate Angular Material into your project. We explored key UI components like buttons, form controls, data tables, and dialogs—all of which help you build professional, polished interfaces without writing custom CSS from scratch. By leveraging these pre-built Material Design elements, you can speed up development while ensuring a consistent, modern look across your web app.

Now that you’ve mastered these fundamentals, the next step is to take your UI development further. In the upcoming lesson, we’ll dive into creating reusable UI components, a crucial skill for keeping your Angular projects clean, scalable, and easy to maintain. Reusable components save time, reduce code duplication, and make your apps more efficient.