Angular Material is a comprehensive UI component library that implements Google's Material Design specification for Angular applications. It provides 35+ production-ready components with built-in accessibility support, internationalization capabilities, comprehensive theming system, and seamless integration with Angular's reactive forms and dependency injection.
npm install @angular/material @angular/cdk @angular/animationsAngular Material uses modular imports where each component has its own entry point for optimal tree-shaking:
// Individual component imports
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
// Core functionality
import { MatCommonModule } from '@angular/material/core';For theming:
@use '@angular/material' as mat;
@use '@angular/material/theming';import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
@Component({
selector: 'app-example',
standalone: true,
imports: [MatButtonModule, MatCardModule, MatInputModule, MatFormFieldModule],
template: `
<mat-card>
<mat-card-header>
<mat-card-title>User Form</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Enter your name">
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary">Submit</button>
</mat-card-actions>
</mat-card>
`
})
export class ExampleComponent {}Angular Material is built around several key architectural patterns:
Essential form input components including text inputs, selects, checkboxes, radio buttons, and date pickers. Integrated with Angular's form validation system.
// Core form field container
class MatFormField {
// Form field container component
}
// Text input enhancement
class MatInput {
// Enhanced input directive for text inputs
}
// Selection components
class MatSelect {
// Single/multiple selection dropdown
}
class MatCheckbox {
// Checkbox form control with tri-state support
}
class MatRadioGroup {
// Radio button group container
}
class MatRadioButton {
// Individual radio button
}Navigation components including menus, tabs, steppers, and sidenav for building application structure and user flows.
class MatToolbar {
// Application toolbar/header
}
class MatSidenav {
// Side navigation panel
}
class MatTabGroup {
// Tabbed content container
}
class MatMenu {
// Dropdown menu component
}
class MatStepper {
// Multi-step workflow component
}Layout components for structuring content including cards, dividers, expansion panels, grid lists, and lists.
class MatCard {
// Flexible card container
}
class MatList {
// Basic list container
}
class MatExpansionPanel {
// Collapsible content sections
}
class MatGridList {
// Responsive grid layouts
}
class MatDivider {
// Visual separator lines
}Interactive elements and status indicators including buttons, badges, chips, and progress indicators.
class MatButton {
// Standard button with multiple appearances
}
class MatIconButton {
// Icon-only button
}
class MatFabButton {
// Floating action button
}
class MatBadge {
// Notification badges
}
class MatChip {
// Removable tag components
}
class MatProgressBar {
// Linear progress indicator
}
class MatProgressSpinner {
// Circular progress indicator
}Overlay components for displaying contextual information including dialogs, bottom sheets, snack bars, and tooltips.
class MatDialog {
// Modal dialog service
}
class MatBottomSheet {
// Mobile-friendly modal service
}
class MatSnackBar {
// Toast notification service
}
class MatTooltip {
// Hover tooltip directive
}Components for displaying and manipulating structured data including tables, trees, and data sources.
class MatTable<T> {
// Flexible data table
}
class MatTableDataSource<T> {
// Data source with filtering and sorting
}
class MatPaginator {
// Pagination controls
}
class MatSort {
// Sortable table headers
}
class MatTree<T, K> {
// Hierarchical data display
}Specialized components for date and time selection including date pickers, calendars, and time pickers.
class MatDatepicker<D> {
// Date selection component
}
class MatCalendar<D> {
// Calendar view component
}
class MatTimepicker {
// Time selection component
}
class DateAdapter<D> {
// Abstract date adapter for different date libraries
}Core theming system including color palettes, typography, and pre-built themes.
// Theme palette type
type ThemePalette = 'primary' | 'accent' | 'warn';
// Animation configuration
interface AnimationsConfig {
disabled?: boolean;
}
// Material animations token
const MATERIAL_ANIMATIONS: InjectionToken<AnimationsConfig>;Comprehensive testing utilities and harnesses for all components.
// Component test harnesses available for all components
class MatButtonHarness extends ComponentHarness {
// Test harness for button components
}
class MatInputHarness extends ComponentHarness {
// Test harness for input components
}
// Month constants for date testing
const JAN = 0, FEB = 1, MAR = 2; // ... etc// Core theme palette
type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;
// Animation configuration
interface AnimationsConfig {
disabled?: boolean;
}
// Common module for shared functionality
class MatCommonModule {
// Shared Angular Material functionality
}
// Date adapter interface
abstract class DateAdapter<D> {
abstract parse(value: any, parseFormat: any): D | null;
abstract format(date: D, displayFormat: any): string;
abstract addCalendarYears(date: D, years: number): D;
abstract addCalendarMonths(date: D, months: number): D;
abstract addCalendarDays(date: D, days: number): D;
abstract getYear(date: D): number;
abstract getMonth(date: D): number;
abstract getDate(date: D): number;
abstract getDayOfWeek(date: D): number;
abstract getMonthNames(style: 'long' | 'short' | 'narrow'): string[];
abstract getDateNames(): string[];
abstract getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[];
abstract getYearName(date: D): string;
abstract getFirstDayOfWeek(): number;
abstract getNumDaysInMonth(date: D): number;
abstract clone(date: D): D;
abstract createDate(year: number, month: number, date: number): D;
abstract today(): D;
abstract isDateInstance(obj: any): boolean;
abstract isValid(date: D): boolean;
abstract invalid(): D;
}
// Date formats interface
interface MatDateFormats {
parse: {
dateInput: any;
};
display: {
dateInput: any;
monthYearLabel: any;
dateA11yLabel: any;
monthYearA11yLabel: any;
};
}
// Ripple configuration
interface RippleConfig {
color?: string;
centered?: boolean;
radius?: number;
persistent?: boolean;
animation?: RippleAnimationConfig;
}
interface RippleAnimationConfig {
enterDuration?: number;
exitDuration?: number;
}
// Error state tracking
class _ErrorStateTracker {
constructor(
private _parentForm: NgForm | FormGroupDirective | null,
private _parentFormGroup: FormGroupDirective | null,
private _defaultMatcher: ErrorStateMatcher | null,
public ngControl: NgControl | null
);
readonly errorState: boolean;
}