Angular Material v13

https://v13.material.angular.dev/
Admin
Angular Material provides a set of high-quality, internationalized, and accessible Material Design...
Tokens:370,006
Snippets:3,777
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Overlay Basic Example

Source: https://v13.material.angular.dev/cdk/overlay/examples

Demonstrates the fundamental setup for creating and displaying an overlay. This example requires the OverlayModule to be imported.

```typescript
import {
  Component,
  ElementRef,
  ViewContainerRef,
  inject,
} from "@angular/core";
import {
  Overlay,
  OverlayContainer,
  OverlayModule,
} from "@angular/cdk/overlay";
import {
  OverlayBasicExampleModule
} from "./overlay-basic-example";

/**
 * @title Basic overlay
 */
@Component({
  selector: "overlay-basic-example",
  templateUrl: "overlay-basic-example.html",
  standalone: true,
  imports: [OverlayModule, OverlayBasicExampleModule],
})
export class OverlayBasicExample {
  private readonly overlay = inject(Overlay);
  private readonly viewContainerRef = inject(ViewContainerRef);

  createOverlay() {
    const overlayRef = this.overlay.create({
      hasBackdrop: true,
      backdropClass: "cdk-overlay-transparent-backdrop",
      positionStrategy: this.overlay
        .position()
        .global()
        .centerHorizontally()
        .centerVertically(),
    });

    overlayRef.attach(this.viewContainerRef);
  }
}

```

--------------------------------

### Testing with MatTreeHarness

Source: https://v13.material.angular.dev/components/tree/examples

This example demonstrates how to use `MatTreeHarness` for testing tree components. It requires a testing environment setup. Open in Stackblitz to run the tests.

```typescript
import {
  TestBed,
  ComponentFixture
} from '@angular/core/testing';
import {
  MatTreeHarness
} from '@angular/material/tree/testing';
import {
  BrowserDynamicTestingModule
} from '@angular/platform-browser-dynamic/testing';
import {
  TreeHarnessExample
} from './tree-harness-example';

describe('MatTreeHarness', () => {
  let fixture: ComponentFixture<TreeHarnessExample>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BrowserDynamicTestingModule],
      declarations: [TreeHarnessExample],
    });
    fixture = TestBed.createComponent(TreeHarnessExample);
  });

  it('can load tree harness', async () => {
    const tree = await MatTreeHarness.getDocumentHarness();
    expect(tree).toBeTruthy();
  });

  it('can get all items', async () => {
    const tree = await MatTreeHarness.getDocumentHarness();
    const items = await tree.getAllItems();
    expect(items.length).toBe(7);
  });

  it('can get items by text', async () => {
    const tree = await MatTreeHarness.getDocumentHarness();
    const items = await tree.getItemsByText('Vegetables');
    expect(items.length).toBe(1);
  });

  it('can expand and collapse an item', async () => {
    const tree = await MatTreeHarness.getDocumentHarness();
    const rootLevelItems = await tree.getAllItems();
    const vegetables = rootLevelItems[1];
    expect(vegetables.isExpanded()).toBe(false);
    await vegetables.expand();
    expect(vegetables.isExpanded()).toBe(true);
    await vegetables.collapse();
    expect(vegetables.isExpanded()).toBe(false);
  });

  it('can get the subtree of an item', async () => {
    const tree = await MatTreeHarness.getDocumentHarness();
    const rootLevelItems = await tree.getAllItems();
    const vegetables = rootLevelItems[1];
    await vegetables.expand();
    const subTreeItems = await vegetables.getDescendants();
    expect(subTreeItems.length).toBe(3);
  });
});

```

--------------------------------

### Basic Input Example

Source: https://v13.material.angular.dev/components/input

Demonstrates a basic input field within a form field. This is the fundamental setup for using `matInput`.

```html
<mat-form-field>
  <input matInput placeholder="Favorite food">
</mat-form-field>

<mat-form-field>
  <textarea matInput placeholder="Leave a comment"></textarea>
</mat-form-field>
```

--------------------------------

### Basic Inputs Example

Source: https://v13.material.angular.dev/components/input/examples

Provides examples of basic input fields for collecting user data like favorite food and comments.

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

/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  templateUrl: 'input-overview-example.html',
  styleUrls: ['input-overview-example.css'],
})
export class InputOverviewExample {}

```

--------------------------------

### Basic Drawer Example

Source: https://v13.material.angular.dev/components/sidenav/examples

A fundamental example of a sidenav (drawer) component. This serves as a starting point for implementing side navigation in your application.

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

/**
 * @title Basic drawer
 */
@Component({
  selector: 'basic-drawer-example',
  templateUrl: 'basic-drawer-example.html',
  styleUrls: ['basic-drawer-example.css'],
})
export class BasicDrawerExample {
  opened = false;
}
```

--------------------------------

### Basic Sidenav Example

Source: https://v13.material.angular.dev/components/sidenav/examples

A simple, foundational example of the sidenav component. This serves as a starting point for integrating side navigation into your application.

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

/**
 * @title Basic sidenav
 */
@Component({
  selector: 'basic-sidenav-example',
  templateUrl: 'basic-sidenav-example.html',
  styleUrls: ['basic-sidenav-example.css'],
})
export class BasicSidenavExample {
  opened = false;
}
```

--------------------------------

### Stepper with Custom States Example

Source: https://v13.material.angular.dev/components/stepper/overview

An example of a stepper component demonstrating custom step states ('phone', 'chat') and navigation buttons. This showcases how to integrate custom icons and states within the stepper structure.

```html
<mat-stepper>
  <mat-step label="Step 1" state="phone">
    <p>Put down your phones.</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 2" state="chat">
    <p>Socialize with each other.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step label="Step 3">
    <p>You're welcome.</p>
  </mat-step>

  <!-- Icon overrides. -->
  <ng-template matStepperIcon="phone">
    <mat-icon>call_end</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="chat">
    <mat-icon>forum</mat-icon>
  </ng-template>
</mat-stepper>
```

--------------------------------

### Basic Paginator Example

Source: https://v13.material.angular.dev/components/paginator/examples

A simple example of the Material paginator component. It displays the current page information and allows navigation between pages.

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

/**
 * @title Basic paginator
 */
@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
  styleUrls: ['paginator-overview-example.css']
})
export class PaginatorOverviewExample {
  // No specific logic needed for this basic example, template handles functionality.
}

```

--------------------------------

### Basic Input Example

Source: https://v13.material.angular.dev/components/input/overview

Demonstrates a basic input field with a label and placeholder.

```html
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <input matInput>
</mat-form-field>

<mat-form-field>
  <mat-label>Leave a comment</mat-label>
  <textarea matInput></textarea>
</mat-form-field>
```

--------------------------------

### Basic Slider Example

Source: https://v13.material.angular.dev/components/slider/examples

A simple example of a basic slider component.

```html
<mat-slider></mat-slider>
```

--------------------------------

### Testing Expansion Panel with Harnesses - Angular Material

Source: https://v13.material.angular.dev/components/expansion/examples

This example demonstrates how to test Angular Material expansion panels and accordions using `MatExpansionPanelHarness` and `MatAccordionHarness`. It's recommended to open this example in Stackblitz to run the included tests.

```typescript
import {ComponentHarness} from '@angular/cdk/testing';
import {MatAccordionHarness, MatExpansionPanelHarness} from '@angular/material/expansion/testing';

class MyHarness extends ComponentHarness {
  static hostSelector = 'my-harness';

  async getExpansionPanel() {
    return this.locatorFor(MatExpansionPanelHarness)();
  }

  async getAccordion() {
    return this.locatorFor(MatAccordionHarness)();
  }
}
```

--------------------------------

### Install Angular CDK Schematics

Source: https://v13.material.angular.dev/guide/schematics

Installs the Angular Component Dev Kit (CDK) using its schematics.

```bash
ng add @angular/cdk

```

--------------------------------

### Vertical Stepper Example

Source: https://v13.material.angular.dev/components/stepper/overview

Basic vertical stepper with navigation between steps.

```html
<mat-stepper orientation="vertical" labelPosition="end">
  <mat-step>
    <ng-template matStepLabel>Fill out your name</ng-template>
    <p>Name *</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fill out your address</ng-template>
    <p>Address *</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
    </div>
  </mat-step>
</mat-stepper>
```

--------------------------------

### Horizontal Stepper Example

Source: https://v13.material.angular.dev/components/stepper/overview

Basic horizontal stepper with navigation between steps.

```html
<mat-stepper orientation="horizontal" labelPosition="end">
  <mat-step>
    <ng-template matStepLabel>Fill out your name</ng-template>
    <p>Name *</p>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fill out your address</ng-template>
    <p>Address *</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
    </div>
  </mat-step>
</mat-stepper>
```

--------------------------------

### Basic Grid List

Source: https://v13.material.angular.dev/components/grid-list/overview

A basic example of a `mat-grid-list` with default settings.

```html
<mat-grid-list cols="4">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
```

--------------------------------

### Basic select

Source: https://v13.material.angular.dev/components/select/examples

Provides a fundamental example of a basic select component.

```html
<mat-select placeholder="Favorite food">
  <mat-option value="steak">Steak</mat-option>
  <mat-option value="pizza">Pizza</mat-option>
  <mat-option value="tacos">Tacos</mat-option>
</mat-select>
```

```html
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
```

--------------------------------

### Datepicker start date

Source: https://v13.material.angular.dev/components/datepicker/examples

Configures the initial date displayed when the datepicker opens. This example sets the starting view and date for the calendar.

```html
<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [startAt]="startDate">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year"></mat-datepicker>
</mat-form-field>
```

--------------------------------

### Toolbar Overview

Source: https://v13.material.angular.dev/components/toolbar/examples

Demonstrates different toolbar configurations and content.

```html
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
      <mat-icon>menu</mat-icon>
    </button>
    <span>My App</span>
    <button mat-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
      My App
    </button>
    <button mat-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
      Favorites
    </button>
    <button mat-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
      Share
    </button>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <div class="example-subtitle">Second Line</div>
  </mat-toolbar-row>
</mat-toolbar>

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable notifications</span>
  </button>
</mat-menu>
```

--------------------------------

### Configurable Slider Example

Source: https://v13.material.angular.dev/components/slider/examples

Demonstrates how to configure a slider with various options like min/max values, step size, ticks, thumb labels, and orientation.

```html
<mat-slider min="0" max="100" step="1" value="0"></mat-slider>
```

--------------------------------

### Responsive Sidenav Example

Source: https://v13.material.angular.dev/components/sidenav/examples

Demonstrates how to create a sidenav that adapts its behavior based on screen size. This is crucial for building applications that work well on both desktop and mobile devices.

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

/**
 * @title Responsive sidenav
 */
@Component({
  selector: 'sidenav-responsive-example',
  templateUrl: 'sidenav-responsive-example.html',
  styleUrls: ['sidenav-responsive-example.css'],
})
export class SidenavResponsiveExample {
  mode = 'over';
  shouldRun = [/(^|\.)(firefox|ios|mac|windows)$/.test(navigator.userAgent.toLowerCase())];
}
```

--------------------------------

### Basic date range picker

Source: https://v13.material.angular.dev/components/datepicker/examples

A fundamental example of a date range picker, allowing users to select a start and end date. Includes input fields for start and end dates and a toggle to open the picker.

```html
<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [range]="range">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-input>

  <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
```

--------------------------------

### Date Range Input Setup

Source: https://v13.material.angular.dev/components/datepicker/overview

Sets up the `mat-date-range-input` component with two input elements for start and end dates.

```html
<mat-date-range-input>
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-range-input>

<mat-date-range-picker #picker></mat-date-range-picker>
```

```html
<mat-date-range-input [rangePicker]="picker">
  <input matStartDate placeholder="Start date">
  <input matEndDate placeholder="End date">
</mat-date-input>

<mat-date-range-picker #picker></mat-date-range-picker>
```

--------------------------------

### Badge Overview Examples

Source: https://v13.material.angular.dev/components/badge/examples

Demonstrates basic badge usage with text and buttons. Shows how to position badges on the left and toggle their visibility.

```html
<p>
  Text with a badge
  <span matBadge="4"></span>
</p>

<p>
  Text with large badge
  <span matBadge="1" matBadgeSize="large"></span>
</p>

<button mat-raised-button matBadge="Action" matBadgePosition="before" color="primary">
  Button with a badge on the left
</button>

<p>
  Button toggles badge visibility
  <mat-slide-toggle matBadge="7" matBadgePosition="after" color="accent">Hide</mat-slide-toggle>
</p>

<p>
  <mat-icon matBadge="15" matBadgeSize="large" matBadgeColor="warn">home</mat-icon>
  Example with a home icon with overlaid badge showing the number 15
</p>
```

--------------------------------

### Configurable Paginator Example

Source: https://v13.material.angular.dev/components/paginator/examples

Demonstrates a configurable paginator with options for list length, page size, and page size options. This is useful for creating custom pagination controls.

```typescript
import {
  Component,
  OnInit,
  ViewChild
} from '@angular/core';
import {
  MatPaginator,
  PageEvent
} from '@angular/material/paginator';

/**
 * @title Configurable paginator
 */
@Component({
  selector: 'paginator-configurable-example',
  templateUrl: 'paginator-configurable-example.html',
  styleUrls: ['paginator-configurable-example.css']
})
export class PaginatorConfigurableExample implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;

  // MatPaginator Inputs
  length = 50;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 50];

  // MatPaginator Output
  pageEvent: PageEvent;

  ngOnInit() {
    // Initialize paginator properties if needed
  }

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }
}

```

--------------------------------

### Horizontal Stepper Example

Source: https://v13.material.angular.dev/components/stepper

Demonstrates a basic horizontal stepper layout. Use this for a standard wizard-like flow.

```html
<mat-stepper>
  <mat-step>
    <ng-template matStepLabel>Fill out your name</ng-template>
    Name *
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fill out your address</ng-template>
    Address *
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <button mat-button matStepperPrevious>Back</button>
  </mat-step>
</mat-stepper>
```

--------------------------------

### Menu with Icons

Source: https://v13.material.angular.dev/components/menu/examples

This example shows how to create a menu with icons next to each menu item. Ensure you have imported `MatIconModule` and `MatMenuModule`.

```html
<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial...</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable notifications</span>
  </button>
</mat-menu>

```

--------------------------------

### Autocomplete Overview

Source: https://v13.material.angular.dev/components/autocomplete/examples

A comprehensive example showcasing the basic setup and functionality of the Angular Material Autocomplete. It covers essential aspects like form control integration and option filtering.

```typescript
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

/**
 * @title Autocomplete overview
 */
@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css'],
})
export class AutocompleteOverviewExample {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  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));
  }
}
```

--------------------------------

### Testing with MatTabGroupHarness

Source: https://v13.material.angular.dev/components/tabs/examples

This example includes tests using `MatTabGroupHarness`. Open in Stackblitz to run the tests.

```html
<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
```

--------------------------------

### Linear Mode Stepper Example

Source: https://v13.material.angular.dev/guide/creating-a-custom-stepper-using-the-cdk-stepper

An example of the custom stepper in linear mode, preventing navigation to the next step until the current one is completed. This example does not use forms.

```html
<app-custom-stepper linear>
  <cdk-step editable="false" [completed]="completed">
    <input type="text" name="a" value="Cannot proceed to next step" />
    <button (click)="completeStep()">Complete step</button>
  </cdk-step>
  <cdk-step editable="false">
    <input type="text" name="b" value="b" />
  </cdk-step>
</app-custom-stepper>
```

--------------------------------

### Basic Checkboxes

Source: https://v13.material.angular.dev/components/checkbox

Demonstrates the basic usage of checkboxes with different color themes. Ensure the `MatCheckboxModule` is imported.

```html
<mat-checkbox>Check me!</mat-checkbox>
<mat-checkbox labelPosition="before">Label before</mat-checkbox>

<p>Primary</p>
<mat-checkbox color="primary">Primary</mat-checkbox>

<p>Accent</p>
<mat-checkbox color="accent">Accent</mat-checkbox>

<p>Warn</p>
<mat-checkbox color="warn">Warn</mat-checkbox>
```

--------------------------------

### Basic Use of `<cdk-table>` (Flex Layout)

Source: https://v13.material.angular.dev/cdk/table/examples

Shows the basic implementation of `<cdk-table>` utilizing display flex for layout.

```html
No.  Name  Weight  Symbol  1  Hydrogen  1.0079  H  2  Helium  4.0026  He  3  Lithium  6.941  Li  4  Beryllium  9.0122  Be  5  Boron  10.811  B  6  Carbon  12.0107  C  7  Nitrogen  14.0067  N  8  Oxygen  15.9994  O  9  Fluorine  18.9984  F  10  Neon  20.1797  Ne
```

--------------------------------

### Card with Media Size Variations

Source: https://v13.material.angular.dev/components/card/examples

Demonstrates how to control the size of media elements within a card. This example shows a card with different media sizes applied.

```html
<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Small</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Medium</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Large</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
    </p>
  </mat-card-content>
</mat-card>

<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Extra large</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
    </p>
  </mat-card-content>
</mat-card>
```

--------------------------------

### Configurable Checkbox Example

Source: https://v13.material.angular.dev/components/checkbox/examples

Demonstrates a configurable checkbox with options for checked, indeterminate, alignment, and disabled states. Includes a basic label.

```html
<mat-checkbox labelPosition="before">I'm a checkbox</mat-checkbox>
```

--------------------------------

### MatGridListHarness Methods

Source: https://v13.material.angular.dev/components/grid-list/api

Provides methods to interact with `MatGridList` in tests, such as getting the number of columns, retrieving tiles by position, and getting all tiles.

```typescript
async getColumns(): Promise<number>
async getTileAtPosition(row: number, column: number): Promise<MatGridTileHarness>
async getTiles(filters: GridTileHarnessFilters = {}): Promise<MatGridTileHarness[]>
async host(): Promise<TestElement>
```

--------------------------------

### MatSnackBarHarness

Source: https://v13.material.angular.dev/components/snack-bar/api

Harness for interacting with a standard mat-snack-bar in tests. Provides methods to dismiss, get action description, get message, check for action, and more.

```APIDOC
## Class: MatSnackBarHarness

### Description
Harness for interacting with a standard mat-snack-bar in tests.

### Properties
- `static hostSelector: '.mat-snack-bar-container'` - The selector for the host element of a `MatSnackBar` instance.

### Methods
- **async dismissWithAction()**
  - Description: Dismisses the snack-bar by clicking the action button. Method cannot be used for snack-bar's without action or with custom content.
  - Returns: `Promise<void>` - Promise that resolves when the action completes.

- **async getActionDescription()**
  - Description: Gets the description of the snack-bar. Method cannot be used for snack-bar's without action or with custom content.
  - Returns: `Promise<string>`

- **async getAllChildLoaders(selector: S)**
  - Parameters:
    - `selector` (S)
  - Returns: `Promise<HarnessLoader[]>`

- **async getAllHarnesses<T>(query: HarnessQuery<T>)**
  - Parameters:
    - `query` (HarnessQuery<T>)
  - Returns: `Promise<T[]>`

- **async getAriaLive()**
  - Description: Gets the aria-live of the snack-bar's live region. The aria-live of a snack-bar is determined based on the ARIA politeness specified in the snack-bar config.
  - Returns: `Promise<AriaLivePoliteness>`

- **async getChildLoader(selector: S)**
  - Parameters:
    - `selector` (S)
  - Returns: `Promise<HarnessLoader>`

- **async getHarness<T>(query: HarnessQuery<T>)**
  - Parameters:
    - `query` (HarnessQuery<T>)
  - Returns: `Promise<T>`

- **async getMessage()**
  - Description: Gets the message of the snack-bar. Method cannot be used for snack-bar's with custom content.
  - Returns: `Promise<string>`

- **async hasAction()**
  - Description: Whether the snack-bar has an action. Method cannot be used for snack-bar's with custom content.
  - Returns: `Promise<boolean>`

- **async host()**
  - Description: Gets a `Promise` for the `TestElement` representing the host element of the component.
  - Returns: `Promise<TestElement>`

- **async isDismissed()**
  - Description: Gets whether the snack-bar has been dismissed.
  - Returns: `Promise<boolean>`

- **static with(options: SnackBarHarnessFilters = {})**
  - Description: Gets a `HarnessPredicate` that can be used to search for a `MatSnackBarHarness` that meets certain criteria.
  - Parameters:
    - `options` (SnackBarHarnessFilters) - Options for filtering which snack bar instances are considered a match.
  - Returns: `HarnessPredicate<MatSnackBarHarness>` - a `HarnessPredicate` configured with the given options.

- **async getRole()** (Deprecated)
  - Description: Gets the role of the snack-bar. The role of a snack-bar is determined based on the ARIA politeness specified in the snack-bar config.
  - Returns: `Promise<'alert' | 'status' | null>`
```

--------------------------------

### Basic Tooltip Example

Source: https://v13.material.angular.dev/components/tooltip

A simple tooltip that appears on hover. Ensure the `MatTooltipModule` is imported.

```html
<button mat-button matTooltip="Info about the action">Action</button>
```

```typescript
import {MatTooltipModule} from '@angular/material/tooltip';
```

--------------------------------

### Align Tab Labels

Source: https://v13.material.angular.dev/components/tabs/overview

Align tab labels to the start, center, or end of the container using the `[mat-align-tabs]` attribute. 'start' is the default alignment.

```html
<mat-tab-group mat-align-tabs="start">
```

--------------------------------

### Table with sorting example

Source: https://v13.material.angular.dev/components/sort

This example demonstrates using `mat-sort-header` with `mat-table`. The `id` for each sort header is automatically derived from the column's `matColumnDef` name.

```html
<table mat-table [dataSource]="dataSource" matSort>

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

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

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

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 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>
```

--------------------------------

### Install Angular Material

Source: https://v13.material.angular.dev/guide/getting-started

Use the Angular CLI's installation schematic to add Angular Material to your project. This command will prompt you to configure themes, typography, and animations.

```bash
ng add @angular/material

```

--------------------------------

### MatTooltipHarness

Source: https://v13.material.angular.dev/components/tooltip/api

Harness for interacting with a standard mat-tooltip in tests. Provides methods to get tooltip text, show/hide the tooltip, check if it's open, and get the host element.

```APIDOC
## Class: MatTooltipHarness

Harness for interacting with a standard mat-tooltip in tests.

### Properties
* `static hostSelector: '.mat-tooltip-trigger'` - Selector for the host element of the tooltip.

### Methods
* `async getTooltipText(): Promise<string>` - Gets a promise for the tooltip panel's text.
* `async hide(): Promise<void>` - Hides the tooltip. Promise that resolves when the action completes.
* `async host(): Promise<TestElement>` - Gets a `Promise` for the `TestElement` representing the host element of the component.
* `async isOpen(): Promise<boolean>` - Gets whether the tooltip is open.
* `async show(): Promise<void>` - Shows the tooltip. Promise that resolves when the action completes.
* `static with(options: TooltipHarnessFilters = {}): HarnessPredicate<MatTooltipHarness>` - Gets a `HarnessPredicate` that can be used to search for a tooltip trigger with specific attributes. Parameters: `options` (TooltipHarnessFilters) - Options for narrowing the search. Returns: a `HarnessPredicate` configured with the given options.
```

--------------------------------

### Invalid Sidenav Layout: Duplicate Start Positions

Source: https://v13.material.angular.dev/components/sidenav/overview

This layout is invalid because it contains two sidenav elements with the 'start' position. A sidenav container can only have one sidenav per side.

```html
<!-- Invalid because there are two `start` position sidenavs. -->
<mat-sidenav-container>
  <mat-sidenav>Start</mat-sidenav>
  <mat-sidenav position="start">Start 2</mat-sidenav>
</mat-sidenav-container>
```

--------------------------------

### Basic Table Usage

Source: https://v13.material.angular.dev/components/table/examples

Demonstrates the fundamental structure for creating a Material Design table using `<table mat-table>` with static data.

```html
<table mat-table class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

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

  <!-- Symbol Column -->
  <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>

  <!-- Row shown when there is no matching data. -->
  <tr *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter</td>
  </tr>
</table>
```

--------------------------------

### Vertical Stepper Example

Source: https://v13.material.angular.dev/components/stepper

Demonstrates a basic vertical stepper layout. This is useful when screen space is limited or for a different visual flow.

```html
<mat-stepper orientation="vertical" linear #stepper>
  <mat-step>
    <ng-template matStepLabel>Fill out your name</ng-template>
    Name *
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Fill out your address</ng-template>
    Address *
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <button mat-button matStepperPrevious>Back</button>
  </mat-step>
</mat-stepper>
```

--------------------------------

### Custom ComponentHarness Example

Source: https://v13.material.angular.dev/cdk/test-harnesses/overview

Example of creating a custom ComponentHarness for a popup component. It uses locatorFor to find elements and provides methods for user interactions like toggling and checking state.

```typescript
class MyPopupHarness extends ComponentHarness {
  static hostSelector = 'my-popup';

  protected getTriggerElement = this.locatorFor('button');
  protected getContentElement = this.locatorForOptional('.my-popup-content');

  /** Toggles the open state of the popup. */
  async toggle() {
    const trigger = await this.getTriggerElement();
    return trigger.click();
  }

  /** Checks if the popup us open. */
  async isOpen() {
    const content = await this.getContentElement();
    return !!content;
  }
}
```

--------------------------------

### getLabel

Source: https://v13.material.angular.dev/components/form-field/api

Gets the label of the form-field.

```APIDOC
## getLabel

### Description
Gets the label of the form-field.

### Returns
`Promise<string | null>`
```

--------------------------------

### getAppearance

Source: https://v13.material.angular.dev/components/form-field/api

Gets the appearance of the form-field.

```APIDOC
## getAppearance

### Description
Gets the appearance of the form-field.

### Returns
`Promise<'legacy' | 'standard' | 'fill' | 'outline'>`
```

--------------------------------

### Theming Icons

Source: https://v13.material.angular.dev/components/icon/overview

Shows how to apply theme colors ('primary', 'accent', 'warn') to icons using the `color` attribute.

```html
<mat-icon color="primary">home</mat-icon>
```

```html
<mat-icon color="accent">favorite</mat-icon>
```

```html
<mat-icon color="warn">warning</mat-icon>
```

--------------------------------

### Basic Icons

Source: https://v13.material.angular.dev/components/icon/examples

Demonstrates the basic usage of Material Icons by displaying a 'home' icon.

```html
<mat-icon>home</mat-icon>

```

--------------------------------

### getText

Source: https://v13.material.angular.dev/components/table/api

Gets the cell's text.

```APIDOC
## getText

### Description
Gets the cell's text.

### Method
async

### Returns
`Promise<string>`
```

--------------------------------

### Tables with display: flex

Source: https://v13.material.angular.dev/components/table

This example demonstrates using `display: flex` for MatTable styles, replacing native table elements with directive selectors. This approach has limitations regarding colspan/rowspan and content-based column resizing.

```html
<mat-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> User name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>

  <!-- Title Definition -->
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.title}} </mat-cell>
  </ng-container>

  <!-- Header and Row Declarations -->
  <mat-header-row *matHeaderRowDef="['username', 'age', 'title']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['username', 'age', 'title']"></mat-row>
</mat-table>
```

--------------------------------

### Configurable Progress Spinner

Source: https://v13.material.angular.dev/components/progress-spinner/examples

Demonstrates how to configure a progress spinner with different colors and modes. Use this to create spinners that visually indicate progress or loading states.

```html
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner mode="determinate" value="50"></mat-progress-spinner>
```

--------------------------------

### getThemeColor

Source: https://v13.material.angular.dev/components/form-field/api

Gets the theme color of the form-field.

```APIDOC
## getThemeColor

### Description
Gets the theme color of the form-field.

### Returns
`Promise<'primary' | 'accent' | 'warn'>`
```

--------------------------------

### getDocumentRoot

Source: https://v13.material.angular.dev/cdk/test-harnesses/api

Gets the root element for the document.

```APIDOC
## getDocumentRoot

### Description
Gets the root element for the document.

### Returns
- `ElementFinder` - Description: The root element of the document.
```

--------------------------------

### Basic Chip List Example

Source: https://v13.material.angular.dev/components/chips/overview

Displays a list of values as individual, keyboard-accessible chips. Supports different colors and selected states.

```html
<mat-chip-list aria-label="Fish selection">
  <mat-chip>One fish</mat-chip>
  <mat-chip>Two fish</mat-chip>
  <mat-chip color="primary" selected>Primary fish</mat-chip>
  <mat-chip color="accent" selected>Accent fish</mat-chip>
</mat-chip-list>
```

--------------------------------

### Basic Checkboxes Example

Source: https://v13.material.angular.dev/components/checkbox/examples

Demonstrates the basic usage of checkboxes, including primary, accent, and warn color variants, as well as disabled and indeterminate states.

```html
<mat-checkbox>Check me!</mat-checkbox>
<mat-checkbox disabled>Disabled</mat-checkbox>
<mat-checkbox indeterminate>Indeterminate</mat-checkbox>

<p>Primary</p>
<mat-checkbox color="primary">Primary</mat-checkbox>

<p>Accent</p>
<mat-checkbox color="accent">Accent</mat-checkbox>

<p>Warn</p>
<mat-checkbox color="warn">Warn</mat-checkbox>
```

--------------------------------

### rootHarnessLoader

Source: https://v13.material.angular.dev/cdk/test-harnesses/api

Gets the root harness loader.

```APIDOC
## rootHarnessLoader

### Description
Gets the root harness loader.

### Returns
- `Promise<HarnessLoader>` - Description not provided
```

--------------------------------

### MatChipOptionHarness

Source: https://v13.material.angular.dev/components/chips/api

Harness for interacting with a selectable chip option.

```APIDOC
## MatChipOptionHarness

### Description
Harness for interacting with a standard selectable chip in tests.

### Properties
#### static hostSelector: '.mat-chip'

The selector for the host element of a selectable chip instance.

### Methods
#### async deselect()

Deselects the given chip. Only applies if it's selectable.

Returns
`Promise<void>` | Promise that resolves when the action completes.

#### async getAllChildLoaders(selector: S)

Parameters
- **selector** (S) -

Returns
`Promise<HarnessLoader[]>` |

#### async getAllHarnesses<T>(query: HarnessQuery<T>)

Parameters
- **query** (HarnessQuery<T>) -

Returns
`Promise<T[]>` |

#### async getAvatar(filter?: ChipAvatarHarnessFilters)

Gets the avatar inside a chip.

Parameters
- **filter** (ChipAvatarHarnessFilters) - Optional - Optionally filters which avatars are included.

Returns
`Promise<MatChipAvatarHarness | null>` |

#### async getChildLoader(selector: S)

Parameters
- **selector** (S) -

Returns
`Promise<HarnessLoader>` |

#### async getHarness<T>(query: HarnessQuery<T>)

Parameters
- **query** (HarnessQuery<T>) -

Returns
`Promise<T>` |

#### async getRemoveButton()

Gets the remove button inside of a chip.

Parameters
- **filter** (ChipRemoveHarnessFilters) - Optional - Optionally filters which remove buttons are included.

Returns
`Promise<MatChipRemoveHarness>` |

#### async getText()

Gets the text of the chip.

Returns
`Promise<string>` |

#### async host()

Gets a `Promise` for the `TestElement` representing the host element of the component.

Returns
`Promise<TestElement>` |

#### async isDisabled()

Whether the chip is disabled.

Returns
`Promise<boolean>` |

#### async isSelected()

Whether the chip is selected.

Returns
`Promise<boolean>` |

#### async remove()

Removes the given chip. Only applies if it's removable.

Returns
`Promise<void>` | Promise that resolves when the action completes.

#### async select()

Selects the given chip. Only applies if it's selectable.

Returns
`Promise<void>` | Promise that resolves when the action completes.

#### async toggle()

Toggles the selected state of the given chip.

Returns
`Promise<void>` | Promise that resolves when the action completes.

#### static with(options?: ChipOptionHarnessFilters)

Gets a `HarnessPredicate` that can be used to search for a `MatChipOptionHarness` that meets certain criteria.

Parameters
- **options** (ChipOptionHarnessFilters) - Optional - Options for filtering which chip instances are considered a match.

Returns
`HarnessPredicate<MatChipOptionHarness>` | a `HarnessPredicate` configured with the given options.
```

--------------------------------

### getDocumentRoot

Source: https://v13.material.angular.dev/cdk/test-harnesses/api

Gets the root element for the document.

```APIDOC
## getDocumentRoot

### Description
Gets the root element for the document.

### Returns
- `Element` - Description not provided
```

--------------------------------

### getColumnName

Source: https://v13.material.angular.dev/components/table/api

Gets the name of the column that the cell belongs to.

```APIDOC
## getColumnName

### Description
Gets the name of the column that the cell belongs to.

### Method
async

### Returns
`Promise<string>`
```

--------------------------------

### Tooltip with Delay (Default)

Source: https://v13.material.angular.dev/components/tooltip/examples

Shows a tooltip with a default delay applied. This example highlights the default behavior when delays are not explicitly set but are configured globally or inherited.

```html
Button with delay-default tooltip
```
Tokens:
Raw