Angular Material: Complete UI Guide for Modern Apps

Modern applications demand clean, responsive, and consistent user interfaces. Angular Material is one of the most powerful UI component libraries available for Angular. It provides ready-to-use, accessible, and customizable components designed using Google’s Material Design guidelines.

This article provides a complete guide to Angular Material, covering installation, layouting, theming, responsive design, form controls, navigation, data tables, best practices, and how to build production-quality UI faster.

1. What Is Angular Material

Angular Material is a UI library built by the Angular team. It includes pre-built, well-designed components such as:

Buttons
Inputs
Modals
Menus
Navigation bars
Data tables
Date pickers
Dialogs
Cards
Stepper
Toolbar
Tabs

It follows Material Design principles including spacing, typography, animation, and color schemes.

2. Why Use Angular Material

Developers choose Angular Material because it is:

2.1 Consistent

Every component follows the same design system.

2.2 Reliable

It is maintained by the official Angular team.

2.3 Fast to Develop

You save time by using prebuilt UI components.

2.4 Customizable

You can create your own themes and override styles.

2.5 Responsive

Components adapt to different screen sizes.

2.6 Accessible

All Material components meet ARIA and WCAG standards.

3. Installing Angular Material

Run the CLI command:

Code

ng add @angular/material

This command:

Installs Angular Material
Sets up animation module
Allows you to choose a theme
Configures typography

After installation you can begin using components immediately.

4. Choosing a Material Theme

Angular Material provides built-in themes:

Indigo Pink
Deep Purple Amber
Pink Blue Grey
Purple Green

When running ng add, select a theme.
You can also create a custom one.

Custom Theme Example

Create a file: custom-theme.scss

Code

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$blue-palette, 600);
$my-accent: mat.define-palette(mat.$amber-palette, A200);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  )
));

@include mat.all-component-themes($my-theme);

Add it to angular.json.

5. Using Angular Material Components

Below are the most important UI components for modern apps.

6. Layout Components

6.1 Toolbar

Code

<mat-toolbar color="primary">
  <span>My Application</span>
</mat-toolbar>

Perfect for headers and navigation.

6.2 Sidenav (Side Navigation Menu)

Code

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true">
    <mat-nav-list>
      <a mat-list-item>Dashboard</a>
      <a mat-list-item>Settings</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <h2>Main Page</h2>
  </mat-sidenav-content>
</mat-sidenav-container>

Useful for admin dashboards.

7. Form Controls

Material offers powerful form components.

7.1 Input Field

Code

<mat-form-field>
  <mat-label>Email</mat-label>
  <input matInput type="email">
</mat-form-field>

7.2 Select

Code

<mat-form-field>
  <mat-select placeholder="Role">
    <mat-option value="admin">Admin</mat-option>
    <mat-option value="user">User</mat-option>
  </mat-select>
</mat-form-field>

7.3 Checkbox

Code

<mat-checkbox>I agree</mat-checkbox>

7.4 Datepicker

Code

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

8. Buttons and Indicators

8.1 Basic Button

Code

<button mat-raised-button color="primary">Submit</button>

8.2 Icon Button

Code

<button mat-icon-button>
  <mat-icon>edit</mat-icon>
</button>

8.3 Progress Bar

Code

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

8.4 Spinner

Code

<mat-spinner></mat-spinner>

9. Navigation Components

9.1 Tabs

Code

<mat-tab-group>
  <mat-tab label="Profile"></mat-tab>
  <mat-tab label="Messages"></mat-tab>
</mat-tab-group>

9.2 Menu

Code

<button mat-button [matMenuTriggerFor]="menu">Options</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Logout</button>
</mat-menu>

10. Display Components

10.1 Card

Code

<mat-card>
  <mat-card-title>Product Name</mat-card-title>
  <mat-card-content>Product description goes here.</mat-card-content>
</mat-card>

Used frequently in dashboards.

10.2 Expansion Panel

Code

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>User Details</mat-panel-title>
    </mat-expansion-panel-header>

    Content goes here
  </mat-expansion-panel>
</mat-accordion>

11. Dialogs and Overlays

11.1 Dialog Component

Trigger:

Code

constructor(private dialog: MatDialog) {}

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

Dialog template:

Code

<h2 mat-dialog-title>Confirmation</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>No</button>
  <button mat-button mat-dialog-close>Yes</button>
</mat-dialog-actions>

Dialogs are essential for confirmations and forms.

12. Data Table (MatTable)

MatTable is one of the most powerful Material components.

12.1 Basic Table

Code

displayedColumns = ['name', 'email', 'role'];
dataSource = usersList;

table.html:

Code

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let row">{{ row.name }}</td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let row">{{ row.email }}</td>
  </ng-container>

  <ng-container matColumnDef="role">
    <th mat-header-cell *matHeaderCellDef>Role</th>
    <td mat-cell *matCellDef="let row">{{ row.role }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

12.2 Pagination

Code

<mat-paginator [pageSize]="10"></mat-paginator>

12.3 Sorting

Code

<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>

MatTable helps build admin dashboards efficiently.

13. Responsive Design Using Layout Utilities

Angular Material uses Flex Layout and CSS Grid.

Example responsive layout

Code

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

grid.css:

Code

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Use this for dashboards and cards.

14. Customizing Angular Material Components

Angular Material encourages custom styling.

Overriding button color

Code

.mat-raised-button.mat-primary {
  background-color: #004488;
}

Overriding card shadow

Code

.mat-card {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

Proper use of SCSS lets you match branding.

15. Building a Real-World Page with Angular Material

Example layout for a dashboard:

Code

<mat-sidenav-container>

  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item>Dashboard</a>
      <a mat-list-item>Reports</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar color="primary">
      <span>Analytics Dashboard</span>
    </mat-toolbar>

    <div class="grid">
      <mat-card>Total Users</mat-card>
      <mat-card>Revenue</mat-card>
      <mat-card>Orders</mat-card>
    </div>

    <mat-card>
      <mat-card-title>Monthly Performance</mat-card-title>
      <mat-card-content>
        <canvas baseChart></canvas>
      </mat-card-content>
    </mat-card>

  </mat-sidenav-content>

</mat-sidenav-container>

This is how modern dashboards are built.

16. Best Practices for Using Angular Material

Use a dedicated Material module for clean imports
Do not import the entire Material library
Create a shared theme file
Keep UI components separate from business logic
Use MatTable only when needed (it is powerful but heavy)
Use lazy loading for large modules
Customize Material theme instead of overriding too many styles
Keep accessibility in mind
Test UI components individually
Use Angular CDK utilities for advanced layouts

Conclusion

Angular Material is one of the most reliable and well-designed UI component libraries available for Angular. By using its ready-made components, developers can build modern, responsive, and user-friendly applications quickly. From form controls and navigation to complex data tables and dynamic layouts, Angular Material provides everything needed to create production-ready interfaces.

By following best practices, customizing themes, and structuring UI components efficiently, you can build professional applications that scale and maintain a consistent user experience.