angular-material

The skill is based on Angular Material v21.x (v21.2.0-next.2), generated at 2026-01-31.

Angular Material is the official UI component library for Angular, implementing Material Design 3 (M3). It provides a comprehensive set of pre-built, accessible components along with the Component Dev Kit (CDK) for building custom components.

When to Apply

Use this skill when:

• Using Angular Material components (buttons, forms, dialogs, tables, etc.)
• Theming with Material Design 3 (M3) color palettes, typography, density
• Working with mat-form-field, inputs, select, autocomplete, or datepicker
• Implementing data tables with sorting, pagination, and filtering
• Creating dialogs, bottom sheets, snackbars, or tooltips
• Building navigation with sidenav, menus, tabs, or steppers
• Using CDK primitives (overlay, portal, drag-drop, virtual scrolling)
• Implementing accessible components with CDK a11y utilities
• Creating custom form field controls that integrate with mat-form-field
• Using component test harnesses for reliable testing
• Scaffolding components with Angular Material schematics

Do NOT use this skill when:

• Using a different UI library (PrimeNG, ngx-bootstrap, etc.)
• Building completely custom UI without Material Design
• Working with Angular Aria headless primitives (use the angular-aria skill instead)

Core References

Topic	Description	Reference
Theming	M3 theming system with color palettes, typography, density, and CSS variables	core-theming
Schematics	Angular CLI schematics for scaffolding components and generating themes	core-schematics
Component Harnesses	Test harnesses for reliable, maintainable component testing	core-harnesses

Components

Buttons & Indicators

Topic	Description	Reference
Buttons	Text, filled, FAB, icon buttons, and button toggles	component-buttons
Badge	Small status descriptors attached to elements	component-badge
Icon	Vector icon display with font and SVG support	component-icon
Progress	Progress bar and spinner indicators	component-progress

Form Controls

Topic	Description	Reference
Form Field	Form field wrapper with labels, hints, errors	component-form-field
Input	Native input and textarea with mat-form-field	component-input
Select	Dropdown select with single and multiple selection	component-select
Autocomplete	Text input with dropdown suggestions	component-autocomplete
Chips	Chips for selection, filtering, and tag input	component-chips
Form Controls	Checkbox, radio, slide toggle, slider	component-form-controls
Datepicker	Date and date range pickers	component-datepicker
Timepicker	Time selection with dropdown options	component-timepicker

Layout

Topic	Description	Reference
Card	Content containers for text, images, actions	component-card
Divider	Line separator for visual content separation	component-divider
Expansion	Expandable panels and accordion	component-expansion
Grid List	Two-dimensional grid layout for tiles	component-grid-list
List	Lists for items, navigation, actions, selection	component-list
Tree	Hierarchical data display with flat/nested trees	component-tree

Navigation

Topic	Description	Reference
Navigation	Sidenav, menu, toolbar, and tabs	component-navigation
Stepper	Wizard-like workflows with steps	component-stepper

Tables

Topic	Description	Reference
Table	Material Design data table with features	component-table
Sort	Sortable column headers	component-sort
Paginator	Pagination controls for paged data	component-paginator

Popups & Modals

Topic	Description	Reference
Dialog	Modal dialogs with data sharing	component-dialog
Bottom Sheet	Modal panels from the bottom	component-bottom-sheet
Snackbar	Brief notification messages	component-snackbar
Tooltip	Text labels on hover/focus	component-tooltip

CDK (Component Development Kit)

Overlays & Positioning

Topic	Description	Reference
Overlay	Floating panels with positioning strategies	cdk-overlay
Portal	Dynamic content rendering	cdk-portal
Dialog	Unstyled modal dialog foundation	cdk-dialog

Accessibility

Topic	Description	Reference
Accessibility	Focus management, keyboard navigation, live announcer	cdk-a11y

Data & Collections

Topic	Description	Reference
Table	Foundational data table with DataSource pattern	cdk-table
Tree	Foundation for hierarchical tree display	cdk-tree
Collections	SelectionModel for managing selection state	cdk-collections
Virtual Scrolling	Performant rendering of large lists	cdk-scrolling

Layout & Responsiveness

Topic	Description	Reference
Layout	BreakpointObserver and MediaMatcher	cdk-layout
Bidi	Bidirectionality (LTR/RTL) handling	cdk-bidi

Interaction

Topic	Description	Reference
Drag and Drop	Reordering lists and transferring items	cdk-drag-drop
Clipboard	Copy text to system clipboard	cdk-clipboard
Listbox	Accessible custom listbox controls	cdk-listbox
Menu	Accessible custom menus and menu bars	cdk-menu

Component Foundations

Topic	Description	Reference
Accordion	Foundation for expandable panel groups	cdk-accordion
Stepper	Foundation for wizard-like workflows	cdk-stepper

Utilities

Topic	Description	Reference
Text Field	Auto-resize textarea and autofill detection	cdk-text-field
Platform	Browser and platform detection	cdk-platform
Observers	Content mutation observation	cdk-observers
Coercion	Input type coercion utilities	cdk-coercion
Keycodes	Keyboard key code constants	cdk-keycodes

Advanced

Topic	Description	Reference
Custom Form Field Control	Creating custom mat-form-field controls	advanced-custom-form-field
Theme Customization	CSS variables and utility classes in custom components	advanced-theme-customization