angular-sanctuary/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 |