Angular Material v20 Skill

Rules

Installation

Use ng add @angular/material for automatic setup
Must install @angular/material@~20.0.0 and @angular/cdk@~20.0.0 together

Component Imports

Import specific component modules (e.g., MatDialogModule, MatFormFieldModule)
Use standalone components with explicit imports array
NEVER import entire Material library

Theming

Use @use '@angular/material' as mat; syntax
Include mat.core() before theme definitions
Define theme with mat.define-light-theme() or mat.define-dark-theme()
Include mat.all-component-themes($theme) to apply theme

Form Fields

Wrap matInput elements in <mat-form-field>
Use appearance attribute: outline, fill, or standard
Include <mat-label> for accessibility
Show errors with <mat-error> when field is invalid and touched

Dialog Usage

Inject MatDialog service
Use dialog.open(Component, config) to open dialogs
Configure dialog with width, data, and other options
Access dialog data via MAT_DIALOG_DATA injection token

Accessibility

Follow ARIA guidelines for all components
Include aria-labels where text content is not visible
Ensure keyboard navigation works for all interactive elements

Change Detection

Use OnPush change detection strategy
Leverage signals for reactive state management

Performance

Lazy load Material modules when possible
Import only required component modules
Use virtual scrolling for large lists with cdk-virtual-scroll-viewport

Context

Summary

Angular Material v20 is the official Material Design component library for Angular 20+ applications, providing pre-built UI components with theming support and accessibility features.

When to Use This Skill

Activate this skill when you need to:

Implement Material Design components in Angular applications
Set up or customize Material theming
Work with form controls (inputs, selects, checkboxes, datepickers)
Create navigation components (toolbar, sidenav, menu, tabs)
Build layouts with cards, expansion panels, steppers
Display data in tables with sorting and pagination
Show dialogs, snackbars, tooltips, or bottom sheets
Ensure WCAG accessibility compliance
Optimize Material component performance

Core Components

Form Controls

MatInput - Text input fields
MatSelect - Dropdown selection
MatCheckbox - Checkbox inputs
MatRadioButton - Radio button groups
MatSlideToggle - Toggle switches
MatSlider - Slider inputs
MatDatepicker - Date selection

Navigation

MatToolbar - Top navigation bar
MatSidenav - Side navigation drawer
MatMenu - Dropdown menus
MatTabs - Tabbed navigation

Layout

MatCard - Card containers
MatDivider - Visual separators
MatExpansionPanel - Collapsible panels
MatGridList - Grid layouts
MatList - List displays
MatStepper - Step-by-step workflows

Buttons & Indicators

MatButton - Button variants
MatButtonToggle - Toggle button groups
MatBadge - Notification badges
MatChip - Chip elements
MatIcon - Icon display
MatProgressBar - Linear progress
MatProgressSpinner - Circular progress

Popups & Modals

MatDialog - Modal dialogs
MatSnackBar - Toast notifications
MatTooltip - Hover tooltips
MatBottomSheet - Bottom sheet modals

Data Tables

MatTable - Data table display
MatSort - Column sorting
MatPaginator - Table pagination

Theming Example

// styles.scss
@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$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);

Dialog Example

import { Component, inject } from '@angular/core';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [MatDialogModule],
  template: `
    <button mat-raised-button (click)="openDialog()">
      Open Dialog
    </button>
  `
})
export class ExampleComponent {
  dialog = inject(MatDialog);
  
  openDialog() {
    this.dialog.open(MyDialogComponent, {
      width: '400px',
      data: { name: 'Example' }
    });
  }
}

Form Field Example

import { Component } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],
  template: `
    <mat-form-field appearance="outline">
      <mat-label>Email</mat-label>
      <input matInput [formControl]="email" />
      <mat-error *ngIf="email.hasError('required')">
        Email is required
      </mat-error>
    </mat-form-field>
  `
})
export class FormComponent {
  email = new FormControl('', Validators.required);
}

Best Practices

Import modules - Import specific component modules for better tree-shaking
Use theming - Leverage Material's theming system for consistent styling
Accessibility - Follow ARIA guidelines and ensure keyboard navigation
OnPush - Use OnPush change detection with signals for better performance
Lazy loading - Lazy load Material modules where possible to reduce initial bundle size

angular-material-v20