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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Angular Material

Name: tessl/npm-angular--material
Author: tessl

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