Building a Responsive Dashboard with Angular Material: A Technical Guide

Introduction:
Angular Material is a popular UI component library that implements Google’s Material Design. It helps developers quickly build modern, responsive user interfaces for Angular applications. In this article, we will explore how to build a simple, responsive dashboard using Angular Material. We will cover the basics of Angular Material components such as the toolbar, sidebar (sidenav), grid layout, and cards, and provide code examples to demonstrate their use.

---

1. Setting Up Angular Material

Before building our dashboard, we need to set up Angular Material in an Angular project. If you already have an Angular project, you can add Angular Material using the Angular CLI:

ng add @angular/material

This command will prompt you to choose a theme and configure global typography styles and animations. Once installed, the necessary Angular Material modules will be added to your project.

---

2. Creating a Responsive Dashboard Layout

Our dashboard will consist of a toolbar at the top, a sidebar for navigation, and a grid layout for displaying various cards.

First, let’s create the basic structure of our dashboard. For this, we will use MatToolbar for the toolbar and MatSidenav for the sidebar. Here’s a simplified HTML structure:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport>
    <mat-nav-list>
      <mat-list-item routerLink="/dashboard">Dashboard</mat-list-item>
      <mat-list-item routerLink="/reports">Reports</mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button mat-icon-button (click)="drawer.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>Dashboard</span>
    </mat-toolbar>

    <div class="content">
      <!-- Dashboard content will go here -->
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

In this layout:

• mat-sidenav-container: This component holds the sidebar (mat-sidenav) and the content (mat-sidenav-content).
• mat-sidenav: The sidebar, which can be toggled.
• mat-toolbar: A toolbar at the top containing a menu button to toggle the sidebar.

---

3. Adding Cards for Dashboard Content

We’ll use Angular Material’s MatCard component to display key information on our dashboard. The MatGridList component will help us create a responsive grid layout for these cards.

Here’s how you can add a simple grid layout with three cards:

<div class="dashboard-grid">
  <mat-grid-list cols="3" rowHeight="1:1">
    <mat-grid-tile>
      <mat-card>
        <mat-card-header>
          <mat-card-title>Total Sales</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <h2>$25,000</h2>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card>
        <mat-card-header>
          <mat-card-title>New Users</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <h2>1,250</h2>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>

    <mat-grid-tile>
      <mat-card>
        <mat-card-header>
          <mat-card-title>Revenue</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <h2>$15,000</h2>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

In this layout:

• mat-grid-list: Creates a grid with three equal columns. The cols attribute defines the number of columns, and rowHeight defines the aspect ratio of the tiles.
• mat-grid-tile: Each grid tile holds a MatCard.
• mat-card: Displays content in a card format, which can include headers, titles, and content.

---

4. Adding Responsive Breakpoints

Now that we have our basic layout, let’s make it responsive. We can adjust the number of columns in the grid based on the screen size using Angular’s BreakpointObserver service, which listens to media query changes.

First, we inject BreakpointObserver in our component:

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  cols: number = 3;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Handset])
      .subscribe(result => {
        if (result.matches) {
          this.cols = 1; // Single column for small screens
        } else {
          this.cols = 3; // Three columns for larger screens
        }
      });
  }
}

We then bind the cols variable to our MatGridList in the template:

<mat-grid-list [cols]="cols" rowHeight="1:1">
  <!-- Same card structure as before -->
</mat-grid-list>

Now, the grid will adjust the number of columns based on the screen size. On smaller screens, such as phones, the grid will display a single column.

---

5. Styling the Dashboard

For a sleek design, we can add some custom CSS to style our dashboard. Here’s a basic style setup for the dashboard:

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.mat-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
}

.content {
  padding: 16px;
}

.dashboard-grid {
  margin: 16px;
}

• .sidenav-container: Ensures the sidebar and content fill the height of the page.
• .sidenav: Sets the width of the sidebar.
• .mat-toolbar: Fixes the toolbar to the top of the screen, ensuring it stays visible when scrolling.
• .content: Adds padding around the dashboard content.
• .dashboard-grid: Adds margin to the grid layout for spacing.

---

6. Adding Interactive Elements with Material Components

We can enhance our dashboard with interactive components like buttons and menus. For example, adding a button in the toolbar that opens a settings menu:

<mat-toolbar color="primary">
  <button mat-icon-button (click)="drawer.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Dashboard</span>
  <span class="spacer"></span>
  <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>settings</mat-icon>
  </button>
</mat-toolbar>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Profile</button>
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Logout</button>
</mat-menu>

• matMenuTriggerFor: Binds the button to open a menu.
• mat-menu: The container for the menu items.

With this, the settings icon in the toolbar will trigger a dropdown menu with profile, settings, and logout options.

---

Conclusion:

Angular Material provides a powerful set of UI components that enable developers to quickly build beautiful, responsive, and feature-rich applications. In this article, we’ve walked through the process of creating a responsive dashboard using Angular Material components like MatToolbar, MatSidenav, MatGridList, and MatCard. We’ve also seen how to make the dashboard responsive using the BreakpointObserver service.

With Angular Material’s wide range of pre-built components, developers can focus on building the core functionality of their applications without worrying about UI consistency and responsiveness. This makes Angular Material an excellent choice for enterprise applications that require a polished, modern user experience.