Skip to main content

​
Build Your First Material App

This guide will walk you through building a simple Angular Material application from scratch. You’ll learn how to import components, use them in your templates, and apply Material Design principles.
Make sure you’ve completed the Installation steps before starting this guide.

​
Step 1: Import Your First Component

Let’s start by adding a Material slide toggle to your application.
1

Import the Module

In your component file, import MatSlideToggleModule:
app.component.ts
import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-root',
  imports: [MatSlideToggleModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-material-app';
}
This example uses standalone components. If you’re using NgModules, add MatSlideToggleModule to your module’s imports array instead.
2

Use the Component

Add the component to your template:
app.component.html
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
3

Run Your App

Start the development server:
ng serve
Open http://localhost:4200 in your browser. You should see a Material Design slide toggle!

​
Step 2: Build a Toolbar

Let’s create a Material toolbar for your application header.
1

Import Toolbar and Button Modules

app.component.ts
import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-root',
  imports: [
    MatToolbarModule,
    MatButtonModule,
    MatIconModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'My Material App';
}
2

Create the Toolbar

app.component.html
<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>{{ title }}</span>
  <span class="spacer"></span>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>
3

Add Styles

app.component.css
.spacer {
  flex: 1 1 auto;
}

​
Step 3: Create a Card Layout

Let’s add some Material cards to display content.
1

Import Card Module

app.component.ts
import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-root',
  imports: [
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatCardModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'My Material App';
}
2

Add Cards to Template

app.component.html
<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>{{ title }}</span>
  <span class="spacer"></span>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

<div class="content">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Welcome</mat-card-title>
      <mat-card-subtitle>Getting started with Angular Material</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        Angular Material provides high-quality UI components for your Angular applications.
        This quick start demonstrates some of the core components.
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button color="primary">LEARN MORE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>
3

Style the Layout

app.component.css
.spacer {
  flex: 1 1 auto;
}

.content {
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

mat-card {
  margin-bottom: 16px;
}

​
Step 4: Add a Form

Let’s create a simple form using Material form fields.
1

Import Form Modules

app.component.ts
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-root',
  imports: [
    ReactiveFormsModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'My Material App';
  email = new FormControl('', [Validators.required, Validators.email]);
  
  getErrorMessage() {
    if (this.email.hasError('required')) {
      return 'You must enter a value';
    }
    return this.email.hasError('email') ? 'Not a valid email' : '';
  }
}
2

Add Form to Template

app.component.html
<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
  <span>{{ title }}</span>
  <span class="spacer"></span>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

<div class="content">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Contact Us</mat-card-title>
      <mat-card-subtitle>Send us a message</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Email</mat-label>
        <input matInput placeholder="[email protected]" [formControl]="email" required>
        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
      </mat-form-field>
      
      <mat-form-field appearance="outline" class="full-width">
        <mat-label>Message</mat-label>
        <textarea matInput rows="5" placeholder="Your message"></textarea>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="primary">SEND</button>
      <button mat-button>CANCEL</button>
    </mat-card-actions>
  </mat-card>
</div>
3

Add Form Styles

app.component.css
.spacer {
  flex: 1 1 auto;
}

.content {
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

mat-card {
  margin-bottom: 16px;
}

.full-width {
  width: 100%;
}

​
Common Component Patterns

Material form fields work with both template-driven and reactive forms:
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';
All Material form components support Angular forms and validation.
Most components accept a color attribute for theming:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
Material components are accessible by default. Always provide:
  • Labels for form fields
  • aria-label for icon buttons
  • Proper heading hierarchy
  • Keyboard navigation support
Many components have multiple variants:
<!-- Buttons -->
<button mat-button>Basic</button>
<button mat-raised-button>Raised</button>
<button mat-flat-button>Flat</button>
<button mat-stroked-button>Stroked</button>

<!-- Form Fields -->
<mat-form-field appearance="fill">...</mat-form-field>
<mat-form-field appearance="outline">...</mat-form-field>

​
Using Schematics

Angular Material includes schematics to generate pre-built components: 
ng generate @angular/material:navigation my-nav
These commands generate complete, working components with Material Design. See the Schematics Guide for more details.

​
Next Steps

Theming

Customize colors, typography, and density

Component API

Explore all available components

Accessibility

Learn about accessibility features

Schematics

Generate components with CLI

​
Additional Resources

Material Design Guidelines

Official Material Design specification

Angular Documentation

Learn more about Angular framework

Component Examples

Live examples and demos

GitHub Repository

Source code and issue tracker

Build docs developers (and LLMs) love

Get started for freeTalk to us