Angular Material v14

https://v14.material.angular.dev
Admin
Angular Material provides a set of high-quality, internationalized, and accessible Material Design...
Tokens:130,793
Snippets:1,588
Trust Score:9.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

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

Use the Angular CLI to start the local development server and view the application.

```bash
ng serve
```

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

### Install Angular Material via CLI

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

Run this command in your project root to install Angular Material, the CDK, and Angular Animations.

```bash
ng add @angular/material
```

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

### MatStartDate

Source: https://v14.material.angular.dev/components/datepicker/api

Input for entering the start date in a mat-date-range-input.

```APIDOC
## MatStartDate

### Description
Input for entering the start date in a mat-date-range-input.

### Properties
- **disabled** (boolean) - Whether the datepicker-input is disabled.
- **errorStateMatcher** (ErrorStateMatcher) - An object used to control the error state of the component.
- **value** (D | null) - The value of the input.

### Methods
- **focus()**: Focuses the input.
- **getMirrorValue()**: Gets the value that should be used when mirroring the input's size. Returns string.
- **isEmpty()**: Gets whether the input is empty. Returns boolean.
- **updateErrorState()**: Updates the error state based on the provided error state matcher.
```

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

### harnessLoaderForAll(selector: string)

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

Gets a Promise for a list of HarnessLoaders, one for each element matching the selector.

```APIDOC
## harnessLoaderForAll(selector: string)

### Description
Gets a Promise for a list of HarnessLoader instances, one rooted at each element matching the given selector.

### Parameters
- **selector** (string) - Required - The CSS selector to match the elements.
```

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

### Creating and Attaching an Overlay

Source: https://v14.material.angular.dev/cdk/overlay/overview

Use overlay.create() to get an OverlayRef, then attach a Portal to display content.

```typescript
const overlayRef = overlay.create();
const userProfilePortal = new ComponentPortal(UserProfile);
overlayRef.attach(userProfilePortal);
```

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

### Complete table implementation

Source: https://v14.material.angular.dev/cdk/table

A full example of a table with three columns and associated row declarations.

```html
<table cdk-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container cdkColumnDef="username">
    <th cdk-header-cell *cdkHeaderCellDef> User name </th>
    <td cdk-cell *cdkCellDef="let row"> {{row.username}} </td>
  </ng-container>

  <!-- Age Definition -->
  <ng-container cdkColumnDef="age">
    <th cdk-header-cell *cdkHeaderCellDef> Age </th>
    <td cdk-cell *cdkCellDef="let row"> {{row.age}} </td>
  </ng-container>

  <!-- Title Definition -->
  <ng-container cdkColumnDef="title">
    <th cdk-header-cell *cdkHeaderCellDef> Title </th>
    <td cdk-cell *cdkCellDef="let row"> {{row.title}} </td>
  </ng-container>

  <!-- Header and Row Declarations -->
  <tr cdk-header-row *cdkHeaderRowDef="['username', 'age', 'title']"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: ['username', 'age', 'title']"></tr>
</table>
```

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

### SeleniumWebDriverHarnessEnvironment.loader

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

Gets a HarnessLoader instance for the current HTML document.

```APIDOC
## SeleniumWebDriverHarnessEnvironment.loader(): HarnessLoader

### Description
Gets a HarnessLoader instance for the current HTML document, rooted at the document's root element.
```

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

### MatStartDateHarness

Source: https://v14.material.angular.dev/components/datepicker/api

Harness for interacting with a standard Material date range start input in tests.

```APIDOC
## MatStartDateHarness

### Methods
- **blur()**: Promise<void> - Blurs the input.
- **focus()**: Promise<void> - Focuses the input.
- **getMax()**: Promise<string | null> - Gets the formatted maximum date.
- **getMin()**: Promise<string | null> - Gets the formatted minimum date.
- **getPlaceholder()**: Promise<string> - Gets the input placeholder.
- **getValue()**: Promise<string> - Gets the input value.
- **host()**: Promise<TestElement> - Gets the host element.
- **isDisabled()**: Promise<boolean> - Checks if disabled.
- **isFocused()**: Promise<boolean> - Checks if focused.
- **isRequired()**: Promise<boolean> - Checks if required.
- **setValue(newValue: string)**: Promise<void> - Sets the input value.
- **static with(options: DatepickerInputHarnessFilters)**: HarnessPredicate<MatStartDateHarness> - Searches for a harness matching criteria.
```

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

### Valid Sidenav Layouts

Source: https://v14.material.angular.dev/components/sidenav

Examples demonstrating correct structural configurations for sidenav containers, including explicit and implicit content handling.

```html
<!-- Creates a layout with a left-positioned sidenav and explicit content. -->
<mat-sidenav-container>
  <mat-sidenav>Start</mat-sidenav>
  <mat-sidenav-content>Main</mat-sidenav-content>
</mat-sidenav-container>
```

```html
<!-- Creates a layout with a left and right sidenav and implicit content. -->
<mat-sidenav-container>
  <mat-sidenav>Start</mat-sidenav>
  <mat-sidenav position="end">End</mat-sidenav>
  <section>Main</section>
</mat-sidenav-container>
```

```html
<!-- Creates an empty sidenav container with no sidenavs and implicit empty content. -->
<mat-sidenav-container></mat-sidenav-container>
```

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

### harnessLoaderForOptional(selector: string)

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

Gets a Promise for a HarnessLoader rooted at the first element matching the given selector, returning null if not found.

```APIDOC
## harnessLoaderForOptional(selector: string)

### Description
Gets a Promise for a HarnessLoader rooted at the first element matching the given selector. If no element is found, the Promise resolves to null.

### Parameters
- **selector** (string) - Required - The CSS selector to match the element.
```

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

### getItems

Source: https://v14.material.angular.dev/components/list/api

Gets a list of harnesses representing the items in this list.

```APIDOC
### getItems(filters?: F): Promise<C[]>

Gets a list of harnesses representing the items in this list.

#### Parameters
- **filters** (F) - Optional - Optional filters used to narrow which harnesses are included

#### Returns
- **Promise<C[]>** - The list of items matching the given filters.
```

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

### host

Source: https://v14.material.angular.dev/components/list/api

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

```APIDOC
### host(): Promise<TestElement>

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

#### Returns
- **Promise<TestElement>**
```

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

### harnessLoaderFor(selector: string)

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

Gets a Promise for a HarnessLoader rooted at the first element matching the given selector.

```APIDOC
## harnessLoaderFor(selector: string)

### Description
Gets a Promise for a HarnessLoader rooted at the first element matching the given selector. If no element is found, the Promise rejects.

### Parameters
- **selector** (string) - Required - The CSS selector to match the element.
```

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

### TestbedHarnessEnvironment.documentRootLoader

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

Gets a HarnessLoader instance for the given fixture, rooted at the HTML document's root element.

```APIDOC
## TestbedHarnessEnvironment.documentRootLoader(fixture: ComponentFixture<unknown>): HarnessLoader

### Description
Gets a HarnessLoader instance for the given fixture, rooted at the HTML document's root element. Can be used to create harnesses for elements that fall outside of the fixture.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture to load the harness from.
```

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

### Basic mat-select and native select

Source: https://v14.material.angular.dev/components/select

Examples of standard mat-select and native select implementations within a form field.

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

```html
<mat-form-field>
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>
```

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

### Overlay.position

Source: https://v14.material.angular.dev/cdk/overlay/api

Gets a position builder for configuring overlay positioning.

```APIDOC
## position()

### Description
Gets a position builder that can be used, via fluent API, to construct and configure a position strategy.

### Returns
- **OverlayPositionBuilder** - An overlay position builder.
```

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

### TestbedHarnessEnvironment.loader

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

Gets a HarnessLoader instance for the given fixture, rooted at the fixture's root element.

```APIDOC
## TestbedHarnessEnvironment.loader(fixture: ComponentFixture<unknown>): HarnessLoader

### Description
Gets a HarnessLoader instance for the given fixture, rooted at the fixture's root element. Should be used to create harnesses for elements contained inside the fixture.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture to load the harness from.
```

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

### Virtual scroll with a custom data source

Source: https://v14.material.angular.dev/cdk/scrolling/overview

Example of using a custom DataSource implementation with cdkVirtualFor to provide data to the viewport.

```typescript
export class MyDataSource extends DataSource<string | undefined> {
  private _dataStream = new BehaviorSubject<(string | undefined)[]>(Array.from({length: 100000}).fill(undefined) as (string | undefined)[]);

  connect(): Observable<(string | undefined)[]> {
    this._fetchPage();
    return this._dataStream;
  }

  disconnect(): void {}

  private _fetchPage() {
    // ... fetch data and update _dataStream
  }
}
```

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

### Avoid Duplication with all-component-themes

Source: https://v14.material.angular.dev/guide/duplicate-theming-styles

Example of a pattern that causes redundant density styles when applying a dark theme, followed by the fix using all-component-colors.

```scss
@use '@angular/material' as mat;

$light-theme: mat.define-light-theme((color: ...));
$dark-theme: mat.define-dark-theme((color: ...));

// Generates styles for all systems configured in the theme. In this case, color styles
// and default density styles are generated. Density is in themes by default.
@include mat.all-component-themes($light-theme);

.dark-theme {
  // Generates styles for all systems configured in the theme. In this case, color styles
  // and the default density styles are generated. **Note** that this is a problem because it
  // means that density styles are generated *again*, even though only the color should change.
  @include mat.all-component-themes($dark-theme);
}
```

```scss
@use '@angular/material' as mat;

...
@include mat.all-component-themes($light-theme);

.dark-theme {
  // This mixin only generates the color styles now.
  @include mat.all-component-colors($dark-theme);
}
```

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

### Avoid Duplication with Individual Component Mixins

Source: https://v14.material.angular.dev/guide/duplicate-theming-styles

Example of redundant styles generated by component-specific theme mixins and the fix using component-specific color mixins.

```scss
@use '@angular/material' as mat;

@include mat.all-component-themes($my-theme);

.my-custom-dark-button {
  // This will also generate the default density styles again.
  @include mat.button-theme($my-theme);
}
```

```scss
@use '@angular/material' as mat;

.my-custom-dark-button {
  // This will only generate the color styles for `mat-button`.
  @include mat.button-color($my-theme);
}
```

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

### Implement a basic menu item with a trigger action

Source: https://v14.material.angular.dev/cdk/menu/overview

Use cdkMenuItem to create a menu item and cdkMenuItemTriggered to handle user interactions.

```html
<button cdkMenuItem
        class="example-menu-item"
        (cdkMenuItemTriggered)="reset()">Reset</button>
```

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

### Overlay.create

Source: https://v14.material.angular.dev/cdk/overlay/api

Creates a new overlay instance.

```APIDOC
## create(config?: OverlayConfig)

### Description
Creates an overlay instance that can be used to display floating UI content.

### Parameters
- **config** (OverlayConfig) - Optional - Configuration applied to the overlay.

### Returns
- **OverlayRef** - Reference to the created overlay.
```

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

### Toolbar Overview

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

A collection of various toolbar configurations demonstrating different layout capabilities.

```html
<mat-toolbar color="primary">
  My Application
</mat-toolbar>

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
</mat-toolbar>

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <span>Second Line</span>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>
```

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

### with

Source: https://v14.material.angular.dev/components/list/api

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

```APIDOC
### static with(options: NavListHarnessFilters = {}): HarnessPredicate<MatNavListHarness>

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

#### Parameters
- **options** (NavListHarnessFilters) - Optional - Options for filtering which nav list instances are considered a match.

#### Returns
- **HarnessPredicate<MatNavListHarness>** - a HarnessPredicate configured with the given options.
```

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

### getItemsGroupedBySubheader

Source: https://v14.material.angular.dev/components/list/api

Gets a list of ListSection representing the list items grouped by subheaders.

```APIDOC
### getItemsGroupedBySubheader(filters?: F): Promise<ListSection<C>[]>

Gets a list of ListSection representing the list items grouped by subheaders. If the list has no subheaders it is represented as a single ListSection with an undefined heading property.

#### Parameters
- **filters** (F) - Optional - Optional filters used to narrow which list item harnesses are included

#### Returns
- **Promise<ListSection<C>[]>** - The list of items matching the given filters, grouped into sections by subheader.
```

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

### Loading Component Harnesses with HarnessLoader

Source: https://v14.material.angular.dev/guide/using-component-harnesses

Demonstrates retrieving all instances or the first instance of a component harness using getAllHarnesses and getHarness.

```typescript
import {MatButtonHarness} from '@angular/material/button/testing';

...

it('should work', async () => {
  const buttons = await loader.getAllHarnesses(MatButtonHarness); // length: 3
  const firstButton = await loader.getHarness(MatButtonHarness); // === buttons[0]
});
```

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

### MatChipOptionHarness

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

Harness for interacting with a selectable Material chip in tests.

```APIDOC
## MatChipOptionHarness

### Description
Harness for interacting with a selectable Material chip instance.

### Methods
- **deselect()**: Promise<void> - Deselects the chip.
- **getAvatar(filter: ChipAvatarHarnessFilters = {})**: Promise<MatChipAvatarHarness | null> - Gets the avatar inside the chip.
- **getRemoveButton(filter: ChipRemoveHarnessFilters = {})**: Promise<MatChipRemoveHarness> - Gets the remove button inside the chip.
- **getText()**: Promise<string> - Gets the text of the chip.
- **isDisabled()**: Promise<boolean> - Checks if the chip is disabled.
- **isSelected()**: Promise<boolean> - Checks if the chip is selected.
- **remove()**: Promise<void> - Removes the chip.
- **select()**: Promise<void> - Selects the chip.
- **toggle()**: Promise<void> - Toggles the selected state.
- **static with(options: ChipOptionHarnessFilters = {})**: HarnessPredicate<MatChipOptionHarness> - Gets a predicate to search for a harness matching criteria.
```

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

### getItemsGroupedByDividers

Source: https://v14.material.angular.dev/components/list/api

Gets a list of sub-lists representing the list items grouped by dividers.

```APIDOC
### getItemsGroupedByDividers(filters?: F): Promise<C[][]>

Gets a list of sub-lists representing the list items grouped by dividers. If the list has no dividers it is represented as a list with a single sub-list.

#### Parameters
- **filters** (F) - Optional - Optional filters used to narrow which list item harnesses are included

#### Returns
- **Promise<C[][]>** - The list of items matching the given filters, grouped into sub-lists by divider.
```

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

### Testing with MatSliderHarness

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

Provides examples for testing the slider component using the MatSliderHarness.

```typescript
Testing with MatSliderHarness
```

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

### Import MatChipListHarness

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

Import the harness class for interacting with chip lists in test environments.

```typescript
import {MatChipListHarness} from '@angular/material/chips/testing';
```

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

### ListRange Type Alias

Source: https://v14.material.angular.dev/cdk/collections/api

Defines a range object with start and end numeric properties.

```typescript
type ListRange = {
    start: number;
    end: number;
};
```

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

### Using SelectionModel for item selection

Source: https://v14.material.angular.dev/cdk/collections/overview

Demonstrates initializing a SelectionModel and performing common operations like select, deselect, toggle, and change tracking.

```typescript
const model = new SelectionModel(
  true,   // multiple selection or not
  [2,1,3] // initial selected values
);

// select a value
model.select(4);
console.log(model.selected.length) //->  4

// deselect a value
model.deselect(4);
console.log(model.selected.length) //->  3

// toggle a value
model.toggle(4);
console.log(model.selected.length) //->  4

// check for selection
console.log(model.isSelected(4)) //-> true

// sort the selections
console.log(model.sort()) //-> [1,2,3,4]

// listen for changes
model.changed.subscribe(s => console.log(s));
```

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

### MatBottomSheet.open(component, config)

Source: https://v14.material.angular.dev/components/bottom-sheet

Opens a bottom sheet with the specified component and optional configuration.

```APIDOC
## MatBottomSheet.open(component, config)

### Description
Opens a bottom sheet containing the provided component. Returns a MatBottomSheetRef instance.

### Parameters
- **component** (Type) - Required - The component to be loaded into the bottom sheet.
- **config** (MatBottomSheetConfig) - Optional - Configuration object including properties like `ariaLabel`, `data`, `hasBackdrop`, `disableClose`, and `autoFocus`.

### Example
```typescript
const bottomSheetRef = bottomSheet.open(SocialShareComponent, {
  ariaLabel: 'Share on social media',
  data: { names: ['Frodo', 'Bilbo'] }
});
```
```

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

### Invalid Sidenav Layouts

Source: https://v14.material.angular.dev/components/sidenav

Examples of common structural errors that violate the sidenav component requirements.

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

```html
<!-- Invalid because there are multiple `<mat-sidenav-content>` elements. -->
<mat-sidenav-container>
  <mat-sidenav-content>Main</mat-sidenav-content>
  <mat-sidenav-content>Main 2</mat-sidenav-content>
</mat-sidenav-container>
```

```html
<!-- Invalid because the `<mat-sidenav>` is outside of the `<mat-sidenav-container>`. -->
<mat-sidenav-container></mat-sidenav-container>
<mat-sidenav></mat-sidenav>
```

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

### Implement a basic listbox

Source: https://v14.material.angular.dev/cdk/listbox/overview

Use the cdkListbox directive on a container and cdkOption on individual items to create a standard listbox.

```html
<label class="example-listbox-label" id="example-fav-color-label">
  Favorite color
</label>
<ul cdkListbox
    aria-labelledby="example-fav-color-label"
    class="example-listbox">
  <li cdkOption="red" class="example-option">Red</li>
  <li cdkOption="green" class="example-option">Green</li>
  <li cdkOption="blue" class="example-option">Blue</li>
</ul>
```

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

### Load component harnesses in a test environment

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

Demonstrates using TestbedHarnessEnvironment to load harnesses for components inside and outside the fixture root.

```typescript
let fixture: ComponentFixture<MyDialogButton>;
let loader: HarnessLoader;
let rootLoader: HarnessLoader;

beforeEach(() => {
  fixture = TestBed.createComponent(MyDialogButton);
  loader = TestbedHarnessEnvironment.loader(fixture);
  rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
});

it('loads harnesses', async () => {
  // Load a harness for the bootstrapped component with `harnessForFixture`
  dialogButtonHarness =
      await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);

  // The button element is inside the fixture's root element, so we use `loader`.
  const buttonHarness = await loader.getHarness(MyButtonHarness);

  // Click the button to open the dialog
  await buttonHarness.click();

  // The dialog is appended to `document.body`, outside of the fixture's root element,
  // so we use `rootLoader` in this case.
  const dialogHarness = await rootLoader.getHarness(MyDialogHarness);

  // ... make some assertions
});
```

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

### Connecting Drop Lists

Source: https://v14.material.angular.dev/cdk/drag-drop

Demonstrates connecting multiple drop lists using direct references or IDs.

```html
<!-- This is valid -->
<div cdkDropList #listOne="cdkDropList" [cdkDropListConnectedTo]="[listTwo]"></div>
<div cdkDropList #listTwo="cdkDropList" [cdkDropListConnectedTo]="[listOne]"></div>

<!-- This is valid as well -->
<div cdkDropList id="list-one" [cdkDropListConnectedTo]="['list-two']"></div>
<div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>
```

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

### Basic Toolbar Implementation

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

A standard single-row toolbar containing a menu icon, title, and action icons.

```html
<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>
```

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

### Define a date range input

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

Use mat-date-range-input with matStartDate and matEndDate directives to capture a start and end date.

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

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

### TestbedHarnessEnvironment

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

Static methods for creating HarnessLoader and ComponentHarness instances within Karma-based unit tests.

```APIDOC
## TestbedHarnessEnvironment.loader(fixture: ComponentFixture<unknown>)

### Description
Gets a HarnessLoader instance for the given fixture, rooted at the fixture's root element.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture to load the harness from.

## TestbedHarnessEnvironment.documentRootLoader(fixture: ComponentFixture<unknown>)

### Description
Gets a HarnessLoader instance for the given fixture, rooted at the HTML document's root element. Useful for elements outside the fixture.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture to load the harness from.

## TestbedHarnessEnvironment.harnessForFixture<T>(fixture: ComponentFixture<unknown>, harnessType: ComponentHarnessConstructor<T>)

### Description
Creates a ComponentHarness instance for the fixture's root element directly.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture.
- **harnessType** (ComponentHarnessConstructor<T>) - Required - The constructor of the harness to create.
```

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

### Define components for harness composition

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

Example of a parent component containing a popup and content children that will be targeted by a harness.

```typescript
@Component({
  selector: 'my-menu',
  template: `
    <my-popup>
      <ng-content></ng-content>
    </my-popup>
  `
})
class MyMenu {
  @Input() triggerText: string;

  @ContentChildren(MyMenuItem) items: QueryList<MyMenuItem>;
}

@Directive({
  selector: 'my-menu-item'
})
class MyMenuItem {}
```

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

### Create a simple list

Source: https://v14.material.angular.dev/components/list/overview

Use mat-list and mat-list-item to create a basic vertical list of items.

```html
<mat-list>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>
```

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

### FullscreenOverlayContainer Configuration

Source: https://v14.material.angular.dev/cdk/overlay

How to configure the application to use the FullscreenOverlayContainer instead of the default OverlayContainer.

```APIDOC
## FullscreenOverlayContainer Configuration

### Description
To enable fullscreen support for overlays, provide the `FullscreenOverlayContainer` class as the implementation for the `OverlayContainer` token in your module's providers.

### Implementation
```typescript
@NgModule({
  providers: [{provide: OverlayContainer, useClass: FullscreenOverlayContainer}],
  // ...
})
export class MyModule { }
```
```

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

### Use CdkPortalOutlet

Source: https://v14.material.angular.dev/cdk/portal/overview

Attach a portal to a specific location in a template using the cdkPortalOutlet directive.

```html
<!-- Attaches the `userSettingsPortal` from the previous example. -->
<ng-template [cdkPortalOutlet]="userSettingsPortal"></ng-template>
```

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

### Define DragStartDelay type

Source: https://v14.material.angular.dev/cdk/drag-drop/api

Configures the delay before a drag operation starts, supporting either a single number or separate values for touch and mouse inputs.

```typescript
type DragStartDelay = number | {
    touch: number;
    mouse: number;
};
```

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

### Implement a basic context menu

Source: https://v14.material.angular.dev/cdk/menu/overview

Use cdkContextMenuTriggerFor on a container to associate it with an ng-template containing a cdkMenu.

```html
<div [cdkContextMenuTriggerFor]="context_menu">
  Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It's not a story the Jedi
  would tell you. It's a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so
  wise he could use the Force to influence the midichlorians to create life… He had such a knowledge
  of the dark side that he could even keep the ones he cared about from dying. The dark side of the
  Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the
  only thing he was afraid of was losing his power, which eventually, of course, he did.
  Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his
  sleep. Ironic. He could save others from death, but not himself.
</div>

<ng-template #context_menu>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Cut</button>
    <button class="example-menu-item" cdkMenuItem>Copy</button>
    <button class="example-menu-item" cdkMenuItem>Link</button>
  </div>
</ng-template>
```

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

### TestbedHarnessEnvironment.harnessForFixture

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

Creates a ComponentHarness instance for the fixture's root element directly.

```APIDOC
## TestbedHarnessEnvironment.harnessForFixture<T extends ComponentHarness>(fixture: ComponentFixture<unknown>, harnessType: ComponentHarnessConstructor<T>): Promise<T>

### Description
Used to create a ComponentHarness instance for the fixture's root element directly. This is necessary when bootstrapping the test with the component you plan to load a harness for.

### Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture.
- **harnessType** (ComponentHarnessConstructor<T>) - Required - The constructor of the harness to create.
```

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

### Create a minimal ComponentHarness

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

A basic implementation of a harness class requiring only the static hostSelector property.

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

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

### MediaMatcher

Source: https://v14.material.angular.dev/cdk/layout/api

Utility service for calling native matchMedia queries.

```APIDOC
## MediaMatcher.matchMedia(query: string)

### Description
Evaluates the given media query and returns the native MediaQueryList.

### Parameters
- **query** (string) - Required - The media query string to evaluate.

### Returns
- **MediaQueryList** - The native MediaQueryList for the provided query.
```

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

### Implement radio menu items

Source: https://v14.material.angular.dev/cdk/menu/overview

Use cdkMenuItemRadio for exclusive selection; state must be manually tracked via cdkMenuItemChecked and cdkMenuItemTriggered.

```html
<button
    *ngFor="let size of sizes"
    cdkMenuItemRadio
    class="example-menu-item"
    [cdkMenuItemChecked]="size === selectedSize"
    (cdkMenuItemTriggered)="selectedSize = size">
  {{size}}
</button>
```

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

### Implement a ComponentHarness with TestElement

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

Demonstrates how to use locator methods to retrieve TestElement instances and expose specific component actions.

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

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

### Construct a light theme

Source: https://v14.material.angular.dev/guide/theming

Create a theme map by passing defined palettes to the define-light-theme function.

```scss
@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 )
));
```

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

### Basic virtual scroll

Source: https://v14.material.angular.dev/cdk/scrolling/overview

Demonstrates the simplest usage of cdkVirtualFor within a virtual scroll viewport, requiring the itemSize property to be set.

```html
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
```

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

### OverlayPositionBuilder.global

Source: https://v14.material.angular.dev/cdk/overlay/api

Creates a global position strategy for an overlay.

```APIDOC
## global()

### Description
Creates a global position strategy.

### Returns
- **GlobalPositionStrategy**
```

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

### Breakpoints Constants

Source: https://v14.material.angular.dev/cdk/layout/api

A collection of predefined media query strings for common device sizes and orientations.

```typescript
const Breakpoints: { XSmall: string; Small: string; Medium: string; Large: string; XLarge: string; Handset: string; Tablet: string; Web: string; HandsetPortrait: string; TabletPortrait: string; WebPortrait: string; HandsetLandscape: string; TabletLandscape: string; WebLandscape: string; };
```

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

### Use alternative CDK table template

Source: https://v14.material.angular.dev/cdk/table

Demonstrates using CDK table directives on custom elements instead of native HTML table tags for full styling control.

```html
<cdk-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container cdkColumnDef="username">
    <cdk-header-cell *cdkHeaderCellDef> User name </cdk-header-cell>
    <cdk-cell *cdkCellDef="let row"> {{row.username}} </cdk-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container cdkColumnDef="age">
    <cdk-header-cell *cdkHeaderCellDef> Age </cdk-header-cell>
    <cdk-cell *cdkCellDef="let row"> {{row.age}} </cdk-cell>
  </ng-container>

  <!-- Title Definition -->
  <ng-container cdkColumnDef="title">
    <cdk-header-cell *cdkHeaderCellDef> Title </cdk-header-cell>
    <cdk-cell *cdkCellDef="let row"> {{row.title}} </cdk-cell>
  </ng-container>

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

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

### Configure Drag and Drop Animations

Source: https://v14.material.angular.dev/cdk/drag-drop

Define CSS transitions for sorting and dropping states using the .cdk-drop-list-dragging and .cdk-drag-animating classes.

```css
/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* Animate an item that has been dropped. */
.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
```

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

### Implement lazy rendering

Source: https://v14.material.angular.dev/components/menu

Defer menu content initialization until the menu is opened by wrapping content in an ng-template with the matMenuContent attribute.

```html
<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent>
    <button mat-menu-item>Settings</button>
    <button mat-menu-item>Help</button>
  </ng-template>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>
```

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

### Add expand/collapse functionality

Source: https://v14.material.angular.dev/cdk/tree/overview

Use cdkTreeNodeToggle to enable expansion and collapse. Set cdkTreeNodeToggleRecursive to true for recursive operations.

```html
<cdk-tree-node *cdkNodeDef="let node" cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="true">
    {{node.value}}
</cdk-tree-node>
```

```html
<cdk-tree-node *cdkNodeDef="let node">
  <button cdkTreeNodeToggle aria-label="toggle tree node" [cdkTreeNodeToggleRecursive]="true">
    <mat-icon>expand</mat-icon>
  </button>
  {{node.value}}
</cdk-tree-node>
```

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

### Apply theme to all components

Source: https://v14.material.angular.dev/guide/theming

Use the all-component-themes mixin to apply styles to every component in the library, though this may produce unnecessary CSS.

```scss
@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 )
));

@include mat.all-component-themes($my-theme);
```

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

### Implement chip input outside the list

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

Demonstrates how to associate an input element with a chip list using the matChipInputFor directive.

```html
<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip>Chip 1</mat-chip>
    <mat-chip>Chip 2</mat-chip>
  </mat-chip-list>
  <input [matChipInputFor]="chipList">
</mat-form-field>
```

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

### Configuring Overlay Dimensions

Source: https://v14.material.angular.dev/cdk/overlay/overview

Pass a configuration object to overlay.create() to set initial dimensions.

```typescript
const overlayRef = overlay.create({
  height: '400px',
  width: '600px',
});
```

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

### MatChipListHarness

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

Harness for interacting with a standard chip list in tests.

```APIDOC
## MatChipListHarness

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

### Methods

#### getChips(filter: ChipHarnessFilters = {})
Gets the list of chips inside the chip list. Returns a Promise<MatChipHarness[]>.

#### getInput(filter: ChipInputHarnessFilters = {})
Gets the MatChipInput inside the chip list. Returns a Promise<MatChipInputHarness>.

#### getOrientation()
Gets the orientation of the chip list. Returns a Promise<'horizontal' | 'vertical'>.

#### host()
Gets a Promise for the TestElement representing the host element of the component. Returns a Promise<TestElement>.

#### isDisabled()
Gets whether the chip list is disabled. Returns a Promise<boolean>.

#### isInvalid()
Gets whether the chip list is invalid. Returns a Promise<boolean>.

#### isMultiple()
Gets whether the chip list is in multi selection mode. Returns a Promise<boolean>.

#### isRequired()
Gets whether the chip list is required. Returns a Promise<boolean>.

#### static with(options: ChipListHarnessFilters = {})
Gets a HarnessPredicate that can be used to search for a MatChipListHarness that meets certain criteria. Returns a HarnessPredicate<MatChipListHarness>.

#### selectChips(filter: ChipHarnessFilters = {}) (Deprecated)
Selects a chip inside the chip list. Returns a Promise<void>.
```

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

### MatChipInputHarness

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

Harness for interacting with a standard Material chip inputs in tests.

```APIDOC
## MatChipInputHarness

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

### Methods
- **blur()**: Promise<void> - Blurs the input.
- **focus()**: Promise<void> - Focuses the input.
- **getPlaceholder()**: Promise<string> - Gets the placeholder of the input.
- **getValue()**: Promise<string> - Gets the value of the input.
- **host()**: Promise<TestElement> - Gets the host element.
- **isDisabled()**: Promise<boolean> - Whether the input is disabled.
- **isFocused()**: Promise<boolean> - Whether the input is focused.
- **isRequired()**: Promise<boolean> - Whether the input is required.
- **sendSeparatorKey(key: string | TestKey)**: Promise<void> - Sends a chip separator key to the input element.
- **setValue(newValue: string)**: Promise<void> - Sets the value of the input.
- **static with(options: ChipInputHarnessFilters = {})**: HarnessPredicate<MatChipInputHarness> - Gets a HarnessPredicate that can be used to search for a MatChipInputHarness.
```

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

### Create a ComponentPortal

Source: https://v14.material.angular.dev/cdk/portal/overview

Instantiate a ComponentPortal using a component type within the component lifecycle.

```typescript
ngAfterViewInit() {
  this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
}
```

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

### MatSnackBar.openFromComponent()

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

Opens a snackbar containing a custom component.

```APIDOC
## MatSnackBar.openFromComponent(component, config?)

### Description
Displays a snackbar containing a custom component instead of a simple string.

### Parameters
- **component** (Type<any>) - Required - The component to load into the snackbar.
- **config** (MatSnackBarConfig) - Optional - Configuration object, including the 'data' property to pass data to the component.

### Returns
- **MatSnackBarRef** - A reference to the opened snackbar.
```

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

### Opening a dialog

Source: https://v14.material.angular.dev/cdk/dialog

Use the open method to display a component as a dialog with optional configuration.

```typescript
const dialogRef = dialog.open(UserProfileComponent, {
  height: '400px',
  width: '600px',
  panelClass: 'my-dialog',
});

```

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

### Testing with MatBadgeHarness

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

Demonstrates how to test the badge component using the MatBadgeHarness.

```typescript
Testing with MatBadgeHarness
```

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

### OverlayPositionBuilder.flexibleConnectedTo

Source: https://v14.material.angular.dev/cdk/overlay/api

Creates a flexible position strategy for an overlay.

```APIDOC
## flexibleConnectedTo(origin)

### Description
Creates a flexible position strategy.

### Parameters
- **origin** (FlexibleConnectedPositionStrategyOrigin) - Required - Origin relative to which to position the overlay.

### Returns
- **FlexibleConnectedPositionStrategy**
```

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

### Initialize HarnessLoader in a Unit Test

Source: https://v14.material.angular.dev/guide/using-component-harnesses

Use TestbedHarnessEnvironment to create a loader for your component fixture within a Karma test environment.

```typescript
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';

let loader: HarnessLoader;

describe('my-component', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({imports: [MyModule], declarations: [UserProfile]})
        .compileComponents();
    fixture = TestBed.createComponent(UserProfile);
    loader = TestbedHarnessEnvironment.loader(fixture);
  });
}
```

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

### Import MatChipsModule

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

Required import statement to use chips components in an Angular application.

```typescript
import {MatChipsModule} from '@angular/material/chips';
```

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

### Create an Inline Menu

Source: https://v14.material.angular.dev/cdk/menu/overview

Use the cdkMenu directive on an element to create a persistent menu that lives directly on the page.

```html
<div class="example-menu" cdkMenu>
  <button class="example-menu-item" cdkMenuItem>Inbox</button>
  <button class="example-menu-item" cdkMenuItem>Snoozed</button>
  <button class="example-menu-item" cdkMenuItem>Important</button>
  <button class="example-menu-item" cdkMenuItem>Sent</button>
  <button class="example-menu-item" cdkMenuItem>Drafts</button>
  <button class="example-menu-item" cdkMenuItem>All Mail</button>
</div>
```

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

### Enable wrapping in ListKeyManager

Source: https://v14.material.angular.dev/cdk/a11y/overview

Configures the key manager to wrap navigation through options.

```typescript
this.keyManager = new FocusKeyManager(...).withWrap();
```

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

### Import MatPaginatorHarness

Source: https://v14.material.angular.dev/components/paginator/api

Import the harness class to enable interaction with the paginator in test suites.

```typescript
import {MatPaginatorHarness} from '@angular/material/paginator/testing';
```

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

### Evaluate media queries with MediaMatcher

Source: https://v14.material.angular.dev/cdk/layout/overview

Use the MediaMatcher service to obtain a native MediaQueryList, which is useful for testing and normalizing browser differences.

```typescript
@Component({...})
class MyComponent {
  constructor(mediaMatcher: MediaMatcher) {
    const mediaQueryList = mediaMatcher.matchMedia('(min-width: 1px)');
  }
}
```

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

### Interact with a mat-button using MatButtonHarness

Source: https://v14.material.angular.dev/guide/using-component-harnesses

Demonstrates using a harness to locate a button, check its state, and perform a click action in an asynchronous test.

```typescript
it('should mark confirmed when ok button clicked', async () => {
  const okButton = await loader.getHarness(MatButtonHarness.with({selector: '.confirm'});
  expect(fixture.componentInstance.confirmed).toBe(false);
  expect(await okButton.isDisabled()).toBe(false);
  await okButton.click();
  expect(fixture.componentInstance.confirmed).toBe(true);
});
```

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

### Import MatOptionHarness

Source: https://v14.material.angular.dev/components/core/api

Import the MatOptionHarness class for use in component testing.

```typescript
import {MatOptionHarness} from '@angular/material/core/testing';
```

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

### Import MatBadgeHarness

Source: https://v14.material.angular.dev/components/badge/api

Import the harness for interacting with the badge component in unit tests.

```typescript
import {MatBadgeHarness} from '@angular/material/badge/testing';
```

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

### Create a DomPortal

Source: https://v14.material.angular.dev/cdk/portal/overview

Capture a native DOM element and instantiate a DomPortal to move arbitrary content.

```html
<div #domPortalContent>Some content here</div>
```

```typescript
@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}
```

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

### MatToolbarHarness

Source: https://v14.material.angular.dev/components/toolbar/api

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

```APIDOC
## MatToolbarHarness

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

### Methods
- **getRowsAsText()** - Returns `Promise<string[]>` - Gets the text of each row in the toolbar.
- **hasMultipleRows()** - Returns `Promise<boolean>` - Whether the toolbar has multiple rows.
- **host()** - Returns `Promise<TestElement>` - Gets a `Promise` for the `TestElement` representing the host element of the component.
- **static with(options: ToolbarHarnessFilters)** - Returns `HarnessPredicate<MatToolbarHarness>` - Gets a `HarnessPredicate` that can be used to search for a `MatToolbarHarness` that meets certain criteria.
```

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

### SeleniumWebDriverHarnessEnvironment

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

Static method for creating a HarnessLoader instance within Selenium WebDriver-based end-to-end tests.

```APIDOC
## SeleniumWebDriverHarnessEnvironment.loader()

### Description
Gets a HarnessLoader instance for the current HTML document, rooted at the document's root element.
```

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

### Open a bottom sheet

Source: https://v14.material.angular.dev/components/bottom-sheet/overview

Use the open method to display a component in a bottom sheet, optionally providing a configuration object.

```typescript
const bottomSheetRef = bottomSheet.open(SocialShareComponent, {
  ariaLabel: 'Share on social media'
});

```

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

### Create a basic menu with a trigger

Source: https://v14.material.angular.dev/cdk/menu/overview

Use cdkMenuTriggerFor to link a button to an ng-template containing a cdkMenu, with individual items marked by cdkMenuItem.

```html
<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>

<ng-template #menu>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Refresh</button>
    <button class="example-menu-item" cdkMenuItem>Settings</button>
    <button class="example-menu-item" cdkMenuItem>Help</button>
    <button class="example-menu-item" cdkMenuItem>Sign out</button>
  </div>
</ng-template>
```
Tokens:
Raw