angular-material

Angular Material UI component library based on Material Design 3

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "angular-material" with this command: npx skills add angular-sanctuary/angular-agent-skills/angular-sanctuary-angular-agent-skills-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

TopicDescriptionReference
ThemingM3 theming system with color palettes, typography, density, and CSS variablescore-theming
SchematicsAngular CLI schematics for scaffolding components and generating themescore-schematics
Component HarnessesTest harnesses for reliable, maintainable component testingcore-harnesses

Components

Buttons & Indicators

TopicDescriptionReference
ButtonsText, filled, FAB, icon buttons, and button togglescomponent-buttons
BadgeSmall status descriptors attached to elementscomponent-badge
IconVector icon display with font and SVG supportcomponent-icon
ProgressProgress bar and spinner indicatorscomponent-progress

Form Controls

TopicDescriptionReference
Form FieldForm field wrapper with labels, hints, errorscomponent-form-field
InputNative input and textarea with mat-form-fieldcomponent-input
SelectDropdown select with single and multiple selectioncomponent-select
AutocompleteText input with dropdown suggestionscomponent-autocomplete
ChipsChips for selection, filtering, and tag inputcomponent-chips
Form ControlsCheckbox, radio, slide toggle, slidercomponent-form-controls
DatepickerDate and date range pickerscomponent-datepicker
TimepickerTime selection with dropdown optionscomponent-timepicker

Layout

TopicDescriptionReference
CardContent containers for text, images, actionscomponent-card
DividerLine separator for visual content separationcomponent-divider
ExpansionExpandable panels and accordioncomponent-expansion
Grid ListTwo-dimensional grid layout for tilescomponent-grid-list
ListLists for items, navigation, actions, selectioncomponent-list
TreeHierarchical data display with flat/nested treescomponent-tree

Navigation

TopicDescriptionReference
NavigationSidenav, menu, toolbar, and tabscomponent-navigation
StepperWizard-like workflows with stepscomponent-stepper

Tables

TopicDescriptionReference
TableMaterial Design data table with featurescomponent-table
SortSortable column headerscomponent-sort
PaginatorPagination controls for paged datacomponent-paginator

Popups & Modals

TopicDescriptionReference
DialogModal dialogs with data sharingcomponent-dialog
Bottom SheetModal panels from the bottomcomponent-bottom-sheet
SnackbarBrief notification messagescomponent-snackbar
TooltipText labels on hover/focuscomponent-tooltip

CDK (Component Development Kit)

Overlays & Positioning

TopicDescriptionReference
OverlayFloating panels with positioning strategiescdk-overlay
PortalDynamic content renderingcdk-portal
DialogUnstyled modal dialog foundationcdk-dialog

Accessibility

TopicDescriptionReference
AccessibilityFocus management, keyboard navigation, live announcercdk-a11y

Data & Collections

TopicDescriptionReference
TableFoundational data table with DataSource patterncdk-table
TreeFoundation for hierarchical tree displaycdk-tree
CollectionsSelectionModel for managing selection statecdk-collections
Virtual ScrollingPerformant rendering of large listscdk-scrolling

Layout & Responsiveness

TopicDescriptionReference
LayoutBreakpointObserver and MediaMatchercdk-layout
BidiBidirectionality (LTR/RTL) handlingcdk-bidi

Interaction

TopicDescriptionReference
Drag and DropReordering lists and transferring itemscdk-drag-drop
ClipboardCopy text to system clipboardcdk-clipboard
ListboxAccessible custom listbox controlscdk-listbox
MenuAccessible custom menus and menu barscdk-menu

Component Foundations

TopicDescriptionReference
AccordionFoundation for expandable panel groupscdk-accordion
StepperFoundation for wizard-like workflowscdk-stepper

Utilities

TopicDescriptionReference
Text FieldAuto-resize textarea and autofill detectioncdk-text-field
PlatformBrowser and platform detectioncdk-platform
ObserversContent mutation observationcdk-observers
CoercionInput type coercion utilitiescdk-coercion
KeycodesKeyboard key code constantscdk-keycodes

Advanced

TopicDescriptionReference
Custom Form Field ControlCreating custom mat-form-field controlsadvanced-custom-form-field
Theme CustomizationCSS variables and utility classes in custom componentsadvanced-theme-customization

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHubOpen in ClawHub

Related Skills

Related by shared tags or category signals.

Automation

angular-aria

No summary provided by upstream source.

Repository SourceNeeds Review
-14
angular-sanctuary
Automation

angularfire

No summary provided by upstream source.

Repository SourceNeeds Review
-8
angular-sanctuary
Automation

angular-material

No summary provided by upstream source.

Repository SourceNeeds Review
-99
pluginagentmarketplace