angular-material-19_skill

Overview

This skill provides concise guidance for using Angular Material 19: components, Material 3 theming, CDK patterns, the new timepicker, and building signal-based custom form controls. It focuses on practical imports, patterns, and migration steps to modernize apps to M19 and M3 theming. The content highlights dark mode, CSS variables, and recommended CDK usage for drag-and-drop and overlays.

How this skill works

It inspects common Material usage patterns and recommends concrete replacements and APIs for v19: component imports, signal-based queries, ControlValueAccessor/MatFormFieldControl implementations, and CSS-variable theming with the M3 mixins. It summarizes CDK patterns (2D drag-drop, overlay, selection), the mat-timepicker integration, and dialog/table examples to accelerate implementation. It also lists anti-patterns and a migration checklist to reduce breaking changes and styling conflicts.

When to use it

• You are building or upgrading a UI with Angular Material 19 components
• Creating custom form controls or MatFormFieldControl using signals
• Implementing Material 3 theming with CSS variables and dark/light switching
• Adding CDK features: 2D drag-drop, overlay, tab reordering, accessibility
• Replacing third-party timepickers with the new mat-timepicker

Best practices

• Import only required Material modules instead of a global Material module
• Use CSS design tokens (--mat-*) and the mat.theme() mixin for M3 theming
• Prefer signal-based queries (viewChild -> viewChild(signal)) and effects over manual stateChange calls
• Use light-dark() and set color-scheme on html for robust dark mode
• Implement typed interfaces for dialog data and avoid any for safety

Example use cases

• Replace a legacy timepicker with mat-timepicker and validate intervals with built-in APIs
• Create a signal-based data table with mat-paginator and mat-sort using computed dataSource
• Implement draggable 2D kanban boards using CDK DragDropModule and tab reordering
• Build a custom form control that implements ControlValueAccessor and MatFormFieldControl using signals and effect-driven updates
• Theme an app with Material 3 tokens, override component styles with styling mixins, and add a dark/light toggle