Angular Material 19

When to Use

• Using Angular Material 19 components
• Creating custom form controls with signal-based patterns
• Implementing Material 3 theming with CSS variables
• Setting up dark/​light mode switching
• Using CDK features (2D Drag & Drop, Overlay, A11y)
• Working with the new timepicker component

Reference files (loaded on demand):

• timepicker.md — Timepicker usage, intervals, validation
• theming.md — M3 theming, dark mode, override mixins, theme service
• cdk-patterns.md — 2D drag-drop, tab reorder, overlay, selection
• custom-controls.md — ControlValueAccessor, MatFormFieldControl with signals

---

Angular Material 19 Key Changes

Material 3 (M3) is Stable

Material 3 is now the default design system. Key features:

• Design tokens as CSS variables — All styling via --mat-* variables
• light-dark() function — Native CSS for theme switching
• Component override mixins — Granular customization without specificity wars
• New "Styling" tab — Each component's docs now shows override API

New Components in v19

• Timepicker (mat-timepicker) — Native time selection → see timepicker.md
• 2D Drag & Drop — Mixed orientation support in CDK → see cdk-patterns.md
• Tab reordering — Draggable tabs with CDK

---

Quick Reference: Common Imports

// Forms
import { MatFormFieldModule } from '@angular/​material/​form-field';
import { MatInputModule } from '@angular/​material/​input';
import { MatSelectModule } from '@angular/​material/​select';
import { MatCheckboxModule } from '@angular/​material/​checkbox';
import { MatDatepickerModule } from '@angular/​material/​datepicker';
import { MatTimepickerModule } from '@angular/​material/​timepicker'; // NEW v19
import { MatAutocompleteModule } from '@angular/​material/​autocomplete';
import { MatSlideToggleModule } from '@angular/​material/​slide-toggle';

// Buttons & Icons
import { MatButtonModule } from '@angular/​material/​button';
import { MatIconModule } from '@angular/​material/​icon';

// Layout
import { MatCardModule } from '@angular/​material/​card';
import { MatTabsModule } from '@angular/​material/​tabs';
import { MatExpansionModule } from '@angular/​material/​expansion';

// Data Display
import { MatTableModule } from '@angular/​material/​table';
import { MatPaginatorModule } from '@angular/​material/​paginator';
import { MatSortModule } from '@angular/​material/​sort';
import { MatChipsModule } from '@angular/​material/​chips';
import { MatTooltipModule } from '@angular/​material/​tooltip';

// Feedback
import { MatDialogModule } from '@angular/​material/​dialog';
import { MatSnackBarModule } from '@angular/​material/​snack-bar';
import { MatProgressSpinnerModule } from '@angular/​material/​progress-spinner';

// CDK
import { DragDropModule } from '@angular/​cdk/​drag-drop';
import { OverlayModule } from '@angular/​cdk/​overlay';

---

Material Dialog Pattern

import { Component, inject } from '@angular/​core';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/​material/​dialog';
import { MatButtonModule } from '@angular/​material/​button';

@Component({
    selector: 'confirm-dialog',
    imports: [MatDialogModule, MatButtonModule],
    template: `
        <h2 mat-dialog-title>{{ data.title }}</​h2>
        <mat-dialog-content>
            <p>{{ data.message }}</​p>
        </​mat-dialog-content>
        <mat-dialog-actions align="end">
            <button mat-button mat-dialog-close>Cancel</​button>
            <button mat-flat-button color="warn" [mat-dialog-close]="true">
                {{ data.confirmText ?? 'Confirm' }}
            </​button>
        </​mat-dialog-actions>
    `,
})
export class ConfirmDialogComponent
{
    readonly data = inject<{ title: string; message: string; confirmText?: string }>(MAT_DIALOG_DATA);
}

---

Material Table with Signals

import { Component, signal, computed, viewChild } from '@angular/​core';
import { MatTableModule } from '@angular/​material/​table';
import { MatSortModule, MatSort, Sort } from '@angular/​material/​sort';
import { MatPaginatorModule, MatPaginator, PageEvent } from '@angular/​material/​paginator';

@Component({
    selector: 'app-data-table',
    imports: [MatTableModule, MatSortModule, MatPaginatorModule],
    template: `
        <table [dataSource]="dataSource()" mat-table matSort
               (matSortChange)="onSortChange($event)">
            <!-- columns -->
            <tr *matHeaderRowDef="displayedColumns" mat-header-row></​tr>
            <tr *matRowDef="let row; columns: displayedColumns" mat-row></​tr>
        </​table>
        <mat-paginator [length]="totalItems()" [pageSize]="pageSize()"
                       [pageSizeOptions]="[10, 25, 50]"
                       (page)="onPageChange($event)"></​mat-paginator>
    `,
})
export class DataTableComponent {
    data = signal<any[]>([]);
    totalItems = signal(0);
    pageSize = signal(10);
    sort = viewChild(MatSort);
    paginator = viewChild(MatPaginator);
    displayedColumns = ['name', 'email', 'actions'];
    dataSource = computed(() => this.data());

    onSortChange(sort: Sort): void { /​* update & reload */ }
    onPageChange(event: PageEvent): void { /​* update & reload */ }
}

---

Anti-Patterns

---

Migration Checklist

• Replace third-party timepicker with mat-timepicker
• Convert @ViewChild queries to signal queries
• Update theming to use M3 mat.theme() mixin
• Implement dark mode with light-dark() function
• Use component override mixins instead of deep CSS selectors
• Convert custom controls to use signals internally

---

Related Skills

---

Resources

• Angular Material Docs
• Material 3 Theming Guide
• Timepicker Component
• CDK Drag & Drop