GICT knowledge base

How to Build Web Apps with Angular Material – Step by Step Guide

Published 4 August 2025

Want to create beautiful web applications that look professional? Angular Material is Google’s free library that helps developers build good-looking websites quickly and easily. It gives you ready-made components like buttons, forms, and tables that work perfectly on both desktop and mobile.

This guide will teach you everything you need to know about Angular Material. We’ll start from the basics and build real examples that you can use in your own projects. By the end, you’ll be able to create modern web applications that users love.

Why Use Angular Material?

Angular Material is popular because it makes building websites much easier. Many big companies like Google, IBM, and Samsung use it for their websites and apps.

Main Benefits

Easy to Use: You can start building in minutes. Just add it to your project and start using ready-made components.
Looks Good: All components follow Google’s Material Design, which means your website will look modern and professional.
Works on All Devices: Your website will work perfectly on phones, tablets, and computers without extra work.
Free and Reliable: Made by Google and used by millions of websites. It’s completely free and gets regular updates.
Fast Development: Instead of building everything from scratch, you can use pre-made components and finish projects much faster.

What We’ll Build

In this guide, we’ll create a simple web application with these features:

User Cards: Display user information in neat cards
Forms: Add new users with validation
Navigation: Menu bar and sidebar for easy navigation
Buttons and Icons: Interactive buttons with Google’s Material icons
Mobile Friendly: Works on all screen sizes

What is Material Design?

Material Design is Google’s way of making websites and apps look good. It has three simple rules:

1. Make it Feel Real

Components should feel like real objects. When you click a button, it should respond like a real button would.

2. Keep it Clean and Clear

Use clear fonts, good spacing, and colors that make sense. Everything should be easy to read and understand.

3. Add Smooth Movement

When things move on the screen, they should move smoothly and have a purpose. This helps users understand what’s happening.

Getting Started

Basic Example: Creating User Cards

Let’s start by building something simple. We’ll create user cards that show information about people. This example will teach you the basics of Angular Material.

Setup Your Project

Let’s create a new Angular project and add Material Design to it:

# Create new Angular project
ng new simple-material-app
cd simple-material-app


# Add Angular Material
ng add @angular/material

When prompted, choose:

Include Angular Animations: Yes
Choose a theme: Indigo/Pink
Set up global typography: Yes
Include browser animations: Yes

Basic Setup – Import What You Need

Here’s how to import Material components in your app:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


// Basic Material Modules
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create Simple User Cards

Now let’s create cards that show user information:

// app.component.ts
import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h1>Angular Material Basic Example</h1>
      
      <div class="cards-container">
        <mat-card class="user-card" *ngFor="let user of users">
          <mat-card-header>
            <div mat-card-avatar class="user-avatar">
              <mat-icon>person</mat-icon>
            </div>
            <mat-card-title>{{user.name}}</mat-card-title>
            <mat-card-subtitle>{{user.email}}</mat-card-subtitle>
          </mat-card-header>
          
          <mat-card-content>
            <p>{{user.description}}</p>
            <div class="user-details">
              <mat-chip-list>
                <mat-chip [color]="getRoleColor(user.role)" selected>
                  {{user.role}}
                </mat-chip>
              </mat-chip-list>
              <span class="join-date">Joined: {{user.joinDate | date:'mediumDate'}}</span>
            </div>
          </mat-card-content>
          
          <mat-card-actions>
            <button mat-button color="primary">
              <mat-icon>email</mat-icon>
              Contact
            </button>
            <button mat-button color="accent">
              <mat-icon>person_add</mat-icon>
              Follow
            </button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  `,
  styles: [`
    .container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
    }
    
    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    
    .user-card {
      max-width: 400px;
    }
    
    .user-avatar {
      background-color: #3f51b5;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .user-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
    }
    
    .join-date {
      font-size: 12px;
      color: #666;
    }
    
    mat-card-actions {
      display: flex;
      gap: 10px;
    }
  `]
})
export class AppComponent {
  users = [
    {
      name: 'John Smith',
      email: '[email protected]',
      description: 'Software Developer with 5 years of experience in Angular and React development.',
      role: 'Developer',
      joinDate: new Date(2023, 0, 15)
    },
    {
      name: 'Sarah Johnson',
      email: '[email protected]',
      description: 'Project Manager specializing in agile methodologies and team leadership.',
      role: 'Manager',
      joinDate: new Date(2022, 5, 10)
    },
    {
      name: 'Mike Wilson',
      email: '[email protected]',
      description: 'UI/UX Designer focused on creating beautiful and functional user interfaces.',
      role: 'Designer',
      joinDate: new Date(2023, 8, 22)
    }
  ];


  getRoleColor(role: string): string {
    switch (role.toLowerCase()) {
      case 'developer': return 'primary';
      case 'manager': return 'accent';
      case 'designer': return 'warn';
      default: return 'primary';
    }
  }
}

Learn the Basic Components

Let’s understand the main building blocks of Angular Material:

Cards – Display Information

Cards are like boxes that hold information. They’re perfect for showing user profiles, articles, or products:

<mat-card>
  <mat-card-header>
    <!-- Title and subtitle go here -->
  </mat-card-header>
  <mat-card-content>
    <!-- Main content goes here -->
  </mat-card-content>
  <mat-card-actions>
    <!-- Buttons go here -->
  </mat-card-actions>
</mat-card>

Buttons – Let Users Take Actions

Material buttons come in different styles for different purposes:

<!-- Simple button -->
<button mat-button>Click me</button>


<!-- Button that stands out -->
<button mat-raised-button color="primary">Important Action</button>


<!-- Round floating button -->
<button mat-fab color="accent">
  <mat-icon>add</mat-icon>
</button>

Icons – Make Things Clear

Icons help users understand what buttons do:

<mat-icon>home</mat-icon>
<mat-icon color="primary">favorite</mat-icon>
<mat-icon>settings</mat-icon>

Tags – Show Categories

Chips are like tags that show categories or removable items:

<mat-chip-list>
  <mat-chip color="primary" selected>Developer</mat-chip>
  <mat-chip color="accent" selected>Designer</mat-chip>
</mat-chip-list>

Add a Simple Form

Let’s create a form where users can add new information. Forms are important for getting user input:

Let’s extend our example with a simple form:

// Add to imports in app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';


// Add to component
import { FormControl, FormGroup, Validators } from '@angular/forms';


export class AppComponent {
  // Add this to your component
  userForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
    role: new FormControl('Developer')
  });


  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form submitted:', this.userForm.value);
      // Add user logic here
    }
  }
}

Add this form to your template:

<!-- Add this after the cards-container div -->
<div class="form-container">
  <h2>Add New User</h2>
  <mat-card>
    <mat-card-content>
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
        <mat-form-field appearance="fill">
          <mat-label>Name</mat-label>
          <input matInput formControlName="name">
          <mat-error *ngIf="userForm.get('name')?.hasError('required')">
            Name is required
          </mat-error>
        </mat-form-field>


        <mat-form-field appearance="fill">
          <mat-label>Email</mat-label>
          <input matInput type="email" formControlName="email">
          <mat-error *ngIf="userForm.get('email')?.hasError('required')">
            Email is required
          </mat-error>
          <mat-error *ngIf="userForm.get('email')?.hasError('email')">
            Please enter a valid email
          </mat-error>
        </mat-form-field>


        <mat-form-field appearance="fill">
          <mat-label>Role</mat-label>
          <mat-select formControlName="role">
            <mat-option value="Developer">Developer</mat-option>
            <mat-option value="Manager">Manager</mat-option>
            <mat-option value="Designer">Designer</mat-option>
          </mat-select>
        </mat-form-field>


        <div class="form-actions">
          <button mat-raised-button color="primary" type="submit" [disabled]="!userForm.valid">
            Add User
          </button>
          <button mat-button type="button" (click)="userForm.reset()">
            Reset
          </button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>
</div>

Add these styles:

.form-container {
  margin-top: 40px;
}


.form-container h2 {
  color: #333;
  margin-bottom: 20px;
}


.form-container mat-form-field {
  width: 100%;
  margin-bottom: 15px;
}


.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

Add Simple Navigation

Good navigation helps users move around your website easily:

Here’s a simple navigation setup:

// Add to imports
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';


// Add to template at the top
<mat-toolbar color="primary">
  <button mat-icon-button (click)="drawer.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My Application</span>
</mat-toolbar>


<mat-drawer-container class="drawer-container">
  <mat-drawer #drawer mode="side">
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon matListIcon>home</mat-icon>
        <span>Home</span>
      </a>
      <a mat-list-item>
        <mat-icon matListIcon>people</mat-icon>
        <span>Users</span>
      </a>
      <a mat-list-item>
        <mat-icon matListIcon>settings</mat-icon>
        <span>Settings</span>
      </a>
    </mat-nav-list>
  </mat-drawer>


  <mat-drawer-content class="main-content">
    <!-- Your existing content goes here -->
  </mat-drawer-content>
</mat-drawer-container>

Run Your App

Start your app and see it in action:

Start your development server:

ng serve

Open your browser to http://localhost:4200 and see your Angular Material application in action.

Tips for Beginners

Here are some simple tips to help you get started:

1. Only Import What You Need

Don’t import everything at once. Only import the components you’re actually using:

// Good - only import what you need
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';


// Avoid - importing everything
import * as Material from '@angular/material';

2. Use the Right Colors

Material Design has three main colors:

primary for main actions (like Save button)
accent for secondary actions
warn for dangerous actions (like Delete button)

3. Follow Simple Rules

Keep things consistent throughout your app
Use proper spacing (leave some empty space between elements)
Make sure text is easy to read
Test your app on different screen sizes

4. Start Simple

Begin with basic components and add more features later:

<!-- Start with this -->
<button mat-button>Click me</button>


<!-- Then add more features -->
<button mat-raised-button color="primary" [disabled]="loading">
  <mat-icon>save</mat-icon>
  Save Changes
</button>

Common Mistakes to Avoid

Here are some mistakes that beginners often make:

1. Forgetting Animations

Always add this to your app module or animations won’t work:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Not Checking Forms

Always check if forms are filled correctly:

// Good - check the form first
if (this.userForm.valid) {
  // save the data
}


// Avoid - not checking the form
// just save without checking

3. Not Making it Mobile-Friendly

Test your app on phones and tablets. Use CSS that works on all screen sizes:

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

What to Learn Next

Once you’re comfortable with the basics, try these:

Data Tables: Show lots of information in organized tables
Pop-up Boxes: Create dialogs for important messages
Advanced Forms: Date pickers and dropdown menus with search
Custom Colors: Change colors to match your brand
Better Accessibility: Make your app work for everyone

Tips for Better Apps

1. Make it Accessible

Test your app with keyboard navigation. Make sure people with disabilities can use it too.

2. Keep it Fast

Only load what you need. Use lazy loading for big features.

3. Stay Consistent

Use the same colors, fonts, and spacing throughout your app.

4. Test on Mobile

Always check how your app looks on phones and tablets.

5. Start Simple

Begin with basic features and add more advanced ones later.

Summary

Great job! You’ve learned the basics of Angular Material. Here’s what you now know:

What You Learned

How to Set Up: Adding Angular Material to your project
Basic Components: Cards, buttons, icons, and forms
Simple Navigation: Menu bars and sidebars
Good Practices: How to write clean, working code
Common Mistakes: What to avoid when building apps

Why This Matters

Learning Angular Material helps you:

Build Faster: Use ready-made components instead of building everything from scratch
Look Professional: Your apps will look modern and polished
Work Anywhere: Your apps will work on phones, tablets, and computers
Get Jobs: Many companies look for developers who know Angular Material
Help Users: Create apps that are easy and fun to use

Keep Learning

To get better at Angular Material:

Practice: Build small projects using what you learned
Read More: Check out Angular Material’s official website
Join Groups: Find other developers learning Angular Material
Stay Updated: Angular Material gets new features regularly
Build Real Projects: Apply these skills to real websites and apps

Final Tips

Remember these important points:

Start Small: Begin with simple components and add more features later
Test Often: Always check your app on different devices
Ask Questions: Join online communities if you get stuck
Keep Practicing: The more you build, the better you’ll get
Have Fun: Enjoy creating beautiful, useful applications

Angular Material makes building modern web apps easier and more enjoyable. With practice, you’ll be creating amazing applications that users love to use.

Good luck with your Angular Material journey!

Related guides

Angular.js