Quick Start - Angular Components

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.

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.

Use the Component

Add the component to your template:

app.component.html

<mat-slide-toggle>Toggle me!</mat-slide-toggle>

Run Your App

Start the development server:

ng serve

Open http://localhost:4200 in your browser. You should see a Material Design slide toggle!

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

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';
}

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>

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.

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';
}

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>

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.

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' : '';
  }
}

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="pat@example.com" [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>

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

Using Forms

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.

Theming Components

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>

Accessibility

Material components are accessible by default. Always provide:

Labels for form fields
aria-label for icon buttons
Proper heading hierarchy
Keyboard navigation support

Component Variants

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

Documentation Index

​Build Your First Material App

​Step 1: Import Your First Component

​Step 2: Build a Toolbar

​Step 3: Create a Card Layout

​Step 4: Add a Form

​Common Component Patterns

​Using Schematics

​Next Steps

Theming

Component API

Accessibility

Schematics

​Additional Resources

Material Design Guidelines

Angular Documentation

Component Examples

GitHub Repository

Build Your First Material App

Step 1: Import Your First Component

Step 2: Build a Toolbar

Step 3: Create a Card Layout

Step 4: Add a Form

Common Component Patterns

Using Schematics

Next Steps

Additional Resources