Angular Material (angular/material2-docs-content)

Angular Material

https://github.com/angular/material2-docs-content
Admin
Angular Material provides a suite of high-quality, accessible UI components for building Angular...

Tokens:531,384
Snippets:2,385
Trust Score:8.9
Update:5 months ago
Show doc for...
Context Summary (auto-generated)
Raw
# Angular Components Examples

## Introduction

This project provides a comprehensive collection of working examples for Angular Material components, Angular CDK (Component Dev Kit), and experimental features. It serves as the official example library for the Angular Components project, offering developers ready-to-use code snippets demonstrating proper implementation patterns for Material Design UI components in Angular applications. The package contains hundreds of standalone component examples that showcase everything from basic buttons and inputs to complex data tables, drag-and-drop interfaces, and accessibility features.

The examples are designed to be directly importable and runnable, making them ideal for rapid prototyping, learning Angular Material patterns, and understanding best practices for component integration. Each example is self-contained with its TypeScript component, HTML template, and CSS styling, compiled as ES2022 modules with full TypeScript type definitions. The package supports modular imports, allowing developers to load specific examples without bundling the entire library, and includes examples for Material components, CDK utilities, ARIA-compliant components, and experimental features under active development.

## Key Functions and APIs

### Loading Examples Dynamically

```typescript
import { loadExample, EXAMPLE_COMPONENTS } from '@angular/components-examples';

// Get metadata for a specific example
const buttonExample = EXAMPLE_COMPONENTS['button-overview'];
console.log(buttonExample.title); // "Button overview"
console.log(buttonExample.componentName); // "ButtonOverviewExample"
console.log(buttonExample.files); // Array of file paths

// Dynamically load an example component
const exampleModule = await loadExample('button-overview');
// Returns the module containing ButtonOverviewExample component

// Iterate through all available examples
Object.keys(EXAMPLE_COMPONENTS).forEach(exampleId => {
  const example = EXAMPLE_COMPONENTS[exampleId];
  console.log(`${exampleId}: ${example.title}`);
});
```

### Material Button Component

```typescript
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-button-demo',
  template: `
    <button mat-button>Basic</button>
    <button mat-button="elevated">Elevated</button>
    <button mat-button="outlined">Outlined</button>
    <button mat-button="filled">Filled</button>
    <button mat-button="tonal">Tonal</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://example.com">Link Button</a>

    <button mat-icon-button aria-label="Menu">
      <mat-icon>menu</mat-icon>
    </button>

    <button mat-fab aria-label="Add">
      <mat-icon>add</mat-icon>
    </button>

    <button mat-mini-fab aria-label="Delete">
      <mat-icon>delete</mat-icon>
    </button>

    <button mat-fab extended>
      <mat-icon>favorite</mat-icon>
      Extended FAB
    </button>
  `,
  imports: [MatButtonModule, MatIconModule],
})
export class ButtonDemoComponent {}
```

### Material Table Component

```typescript
import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
];

@Component({
  selector: 'app-table-demo',
  template: `
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>

      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>

      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `,
  imports: [MatTableModule],
})
export class TableDemoComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}
```

### Material Dialog Component

```typescript
import { Component, inject, model, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import {
  MAT_DIALOG_DATA,
  MatDialog,
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-dialog-demo',
  template: `
    <mat-form-field>
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="name">
    </mat-form-field>
    <button mat-button (click)="openDialog()">Open Dialog</button>
    <p>Favorite animal: {{animal()}}</p>
  `,
  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule],
})
export class DialogDemoComponent {
  readonly animal = signal('');
  readonly name = model('');
  readonly dialog = inject(MatDialog);

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogContentComponent, {
      data: { name: this.name(), animal: this.animal() },
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result !== undefined) {
        this.animal.set(result);
      }
    });
  }
}

@Component({
  selector: 'app-dialog-content',
  template: `
    <h2 mat-dialog-title>Favorite Animal</h2>
    <mat-dialog-content>
      <mat-form-field>
        <mat-label>What's your favorite animal?</mat-label>
        <input matInput [(ngModel)]="animal">
      </mat-form-field>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="onNoClick()">Cancel</button>
      <button mat-button [mat-dialog-close]="animal" cdkFocusInitial>Ok</button>
    </mat-dialog-actions>
  `,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    MatButtonModule,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
  ],
})
export class DialogContentComponent {
  readonly dialogRef = inject(MatDialogRef<DialogContentComponent>);
  readonly data = inject<DialogData>(MAT_DIALOG_DATA);
  readonly animal = model(this.data.animal);

  onNoClick(): void {
    this.dialogRef.close();
  }
}
```

### Material Form Field and Input

```typescript
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-form-demo',
  template: `
    <mat-form-field>
      <mat-label>Enter your name</mat-label>
      <input matInput placeholder="John Doe" [(ngModel)]="name">
    </mat-form-field>

    <mat-form-field>
      <mat-label>Choose an option</mat-label>
      <mat-select [(ngModel)]="selectedOption">
        <mat-option value="option1">Option 1</mat-option>
        <mat-option value="option2">Option 2</mat-option>
        <mat-option value="option3">Option 3</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Enter description</mat-label>
      <textarea matInput rows="4" [(ngModel)]="description"></textarea>
    </mat-form-field>

    <p>Name: {{name}}</p>
    <p>Selected: {{selectedOption}}</p>
  `,
  imports: [FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
})
export class FormDemoComponent {
  name = '';
  selectedOption = '';
  description = '';
}
```

### Material Autocomplete

```typescript
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-autocomplete-demo',
  template: `
    <mat-form-field>
      <mat-label>Choose a state</mat-label>
      <input
        matInput
        [formControl]="myControl"
        [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option
          *ngFor="let option of filteredOptions | async"
          [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  `,
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
  ],
})
export class AutocompleteDemoComponent {
  myControl = new FormControl('');
  options: string[] = ['California', 'Colorado', 'Connecticut', 'Florida'];
  filteredOptions: Observable<string[]>;

  constructor() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.options.filter(option =>
      option.toLowerCase().includes(filterValue)
    );
  }
}
```

### Material Datepicker

```typescript
import { Component } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideNativeDateAdapter } from '@angular/material/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-datepicker-demo',
  template: `
    <mat-form-field>
      <mat-label>Choose a date</mat-label>
      <input
        matInput
        [matDatepicker]="picker"
        [formControl]="dateControl">
      <mat-datepicker-toggle
        matIconSuffix
        [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Date range</mat-label>
      <mat-date-range-input [rangePicker]="rangePicker">
        <input matStartDate placeholder="Start date">
        <input matEndDate placeholder="End date">
      </mat-date-range-input>
      <mat-datepicker-toggle
        matIconSuffix
        [for]="rangePicker"></mat-datepicker-toggle>
      <mat-date-range-picker #rangePicker></mat-date-range-picker>
    </mat-form-field>

    <p>Selected date: {{dateControl.value | date}}</p>
  `,
  providers: [provideNativeDateAdapter()],
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
  ],
})
export class DatepickerDemoComponent {
  dateControl = new FormControl(new Date());
}
```

### Material Snackbar (Toast Notifications)

```typescript
import { Component, inject } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-snackbar-demo',
  template: `
    <button mat-button (click)="openSnackBar('Message sent!', 'Close')">
      Show Snackbar
    </button>
    <button mat-button (click)="openSnackBarWithAction()">
      Show with Action
    </button>
    <button mat-button (click)="openSnackBarWithConfig()">
      Show with Config
    </button>
  `,
  imports: [MatButtonModule],
})
export class SnackbarDemoComponent {
  private _snackBar = inject(MatSnackBar);

  openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action);
  }

  openSnackBarWithAction() {
    const snackBarRef = this._snackBar.open('Item deleted', 'Undo', {
      duration: 3000,
    });

    snackBarRef.onAction().subscribe(() => {
      console.log('Undo action triggered');
    });
  }

  openSnackBarWithConfig() {
    this._snackBar.open('Connection error', 'Retry', {
      duration: 5000,
      horizontalPosition: 'end',
      verticalPosition: 'top',
      panelClass: ['error-snackbar'],
    });
  }
}
```

### Material Checkbox

```typescript
import { Component, signal, computed } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';

export interface Task {
  name: string;
  completed: boolean;
  subtasks?: Task[];
}

@Component({
  selector: 'app-checkbox-demo',
  template: `
    <mat-checkbox
      [checked]="task().completed"
      [indeterminate]="partiallyComplete()"
      (change)="update($event.checked)">
      {{task().name}}
    </mat-checkbox>

    <div style="margin-left: 20px;">
      <mat-checkbox
        *ngFor="let subtask of task().subtasks; let i = index"
        [(ngModel)]="subtask.completed"
        (ngModelChange)="updateSubtask(i)">
        {{subtask.name}}
      </mat-checkbox>
    </div>
  `,
  imports: [MatCheckboxModule, FormsModule],
})
export class CheckboxDemoComponent {
  readonly task = signal<Task>({
    name: 'Complete project',
    completed: false,
    subtasks: [
      { name: 'Design mockups', completed: false },
      { name: 'Implement features', completed: false },
      { name: 'Write tests', completed: false },
    ],
  });

  readonly partiallyComplete = computed(() => {
    const task = this.task();
    if (!task.subtasks) return false;
    return task.subtasks.some(t => t.completed) &&
           !task.subtasks.every(t => t.completed);
  });

  update(completed: boolean) {
    this.task.update(task => {
      task.completed = completed;
      task.subtasks?.forEach(t => (t.completed = completed));
      return { ...task };
    });
  }

  updateSubtask(index: number) {
    this.task.update(task => {
      task.completed = task.subtasks?.every(t => t.completed) ?? true;
      return { ...task };
    });
  }
}
```

### Material Sidenav (Drawer)

```typescript
import { Component } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-sidenav-demo',
  template: `
    <mat-sidenav-container style="height: 100vh;">
      <mat-sidenav #sidenav mode="side" opened>
        <h2>Menu</h2>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </mat-sidenav>

      <mat-sidenav-content>
        <button mat-button (click)="sidenav.toggle()">
          Toggle Sidenav
        </button>
        <h1>Main Content</h1>
        <p>Content goes here</p>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `,
  imports: [MatSidenavModule, MatButtonModule],
})
export class SidenavDemoComponent {}
```

### Material Slider

```typescript
import { Component } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-slider-demo',
  template: `
    <mat-slider min="0" max="100" step="1">
      <input matSliderThumb [(ngModel)]="value">
    </mat-slider>
    <p>Value: {{value}}</p>

    <mat-slider min="0" max="100" discrete>
      <input matSliderStartThumb [(ngModel)]="rangeStart">
      <input matSliderEndThumb [(ngModel)]="rangeEnd">
    </mat-slider>
    <p>Range: {{rangeStart}} - {{rangeEnd}}</p>
  `,
  imports: [MatSliderModule, FormsModule],
})
export class SliderDemoComponent {
  value = 50;
  rangeStart = 20;
  rangeEnd = 80;
}
```

### CDK Drag and Drop

```typescript
import { Component } from '@angular/core';
import { CdkDrag, CdkDropList, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop-demo',
  template: `
    <div cdkDropList (cdkDropListDropped)="drop($event)">
      <div
        *ngFor="let item of items"
        cdkDrag
        style="padding: 10px; margin: 5px; background: #f0f0f0;">
        {{item}}
      </div>
    </div>
  `,
  imports: [CdkDrag, CdkDropList],
})
export class DragDropDemoComponent {
  items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }
}
```

### CDK Clipboard

```typescript
import { Component } from '@angular/core';
import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
import { MatButtonModule } from '@angular/material/button';
import { inject } from '@angular/core';

@Component({
  selector: 'app-clipboard-demo',
  template: `
    <textarea [(ngModel)]="value" rows="4" cols="50"></textarea>
    <button mat-button [cdkCopyToClipboard]="value">
      Copy to Clipboard
    </button>
    <button mat-button (click)="copyProgrammatically()">
      Copy with Service
    </button>
  `,
  imports: [ClipboardModule, MatButtonModule],
})
export class ClipboardDemoComponent {
  private clipboard = inject(Clipboard);
  value = 'Text to copy';

  copyProgrammatically() {
    const successful = this.clipboard.copy(this.value);
    console.log('Copy successful:', successful);
  }
}
```

### CDK Focus Monitor (Accessibility)

```typescript
import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy, inject } from '@angular/core';
import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';

@Component({
  selector: 'app-focus-monitor-demo',
  template: `
    <div>
      <button #monitoredButton>Monitored Button</button>
      <p>Focus origin: {{elementOrigin}}</p>
    </div>

    <div #subtreeElement>
      <p>Subtree monitoring</p>
      <input type="text" placeholder="Input in subtree">
      <button>Button in subtree</button>
      <p>Subtree focus origin: {{subtreeOrigin}}</p>
    </div>
  `,
})
export class FocusMonitorDemoComponent implements AfterViewInit, OnDestroy {
  private focusMonitor = inject(FocusMonitor);

  @ViewChild('monitoredButton') monitoredButton: ElementRef<HTMLElement>;
  @ViewChild('subtreeElement') subtreeElement: ElementRef<HTMLElement>;

  elementOrigin = 'none';
  subtreeOrigin = 'none';

  ngAfterViewInit() {
    // Monitor focus on a specific element
    this.focusMonitor.monitor(this.monitoredButton).subscribe(origin => {
      this.elementOrigin = this.formatOrigin(origin);
    });

    // Monitor focus within a subtree
    this.focusMonitor.monitor(this.subtreeElement, true).subscribe(origin => {
      this.subtreeOrigin = this.formatOrigin(origin);
    });
  }

  ngOnDestroy() {
    this.focusMonitor.stopMonitoring(this.monitoredButton);
    this.focusMonitor.stopMonitoring(this.subtreeElement);
  }

  formatOrigin(origin: FocusOrigin): string {
    return origin ? `${origin} focused` : 'blurred';
  }
}
```

## Use Cases and Integration

This package is primarily used as a reference library for Angular developers building applications with Angular Material. Developers can import individual examples into their documentation sites, use them as starting points for custom components, or study them to understand proper implementation patterns. The examples are particularly valuable for teams adopting Material Design principles, as they demonstrate not just component usage but also proper accessibility practices, responsive design patterns, and integration with Angular's reactive forms system.

For integration into applications, developers can either copy code directly from the example source files or use the dynamic loading API to embed live examples in documentation sites. The modular structure allows selective imports, keeping bundle sizes small. Common integration patterns include using examples in component galleries, interactive documentation systems, prototyping tools, and educational materials. The package also serves as a test bed for the Angular Material library itself, with each example demonstrating stable, production-ready implementations that have been thoroughly tested across different Angular versions and browser environments.