or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons-indicators.mddata-display.mddate-time.mdform-controls.mdindex.mdlayout.mdnavigation.mdpopups-modals.mdtesting.mdtheming.md
tile.json

tessl/npm-angular--material

Angular Material is a comprehensive UI component library implementing Google's Material Design specification for Angular applications with 35+ production-ready components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/material@21.0.x

To install, run

npx @tessl/cli install tessl/npm-angular--material@21.0.0

index.mddocs/

Angular Material

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.

Package Information

  • Package Name: @angular/material
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/material @angular/cdk @angular/animations
  • Documentation: https://material.angular.dev

Core Imports

Angular 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';

Basic Usage

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 {}

Architecture

Angular Material is built around several key architectural patterns:

  • Modular Design: Each component is a separate entry point with its own NgModule for optimal tree-shaking
  • Angular CDK Foundation: Built on Angular Component Dev Kit for accessibility, layout, and behavior patterns
  • Material Design 3: Implements the latest Material Design specification with M2 compatibility
  • Theming System: Comprehensive SCSS-based theming with pre-built themes and custom theme creation
  • Form Integration: Seamless integration with Angular Reactive Forms and template-driven forms
  • Accessibility First: WCAG compliant with ARIA support, keyboard navigation, and screen reader compatibility
  • Internationalization: Built-in i18n support with RTL layout support

Capabilities

Form Controls

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
}

Form Controls

Navigation

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
}

Navigation

Layout

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
}

Layout

Buttons & Indicators

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
}

Buttons & Indicators

Popups & Modals

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
}

Popups & Modals

Data Display

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
}

Data Display

Date & Time

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
}

Date & Time

Theming & Styling

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>;

Theming & Styling

Testing

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

Testing

Types

// 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;
}