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

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

References

• Material Design Guidelines
• Angular Material Docs
• Component API