Angular Material v15

https://v15.material.angular.dev/
Admin
Angular Material provides high-quality, internationalized, and accessible Material Design components...
Tokens:404,738
Snippets:4,202
Trust Score:9.9
Update:3 days ago
Show doc for...
Tokens:
Raw
### Example: Composing Harnesses for MyMenu

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

Example showing how to use locatorFor and locatorForAll to compose harnesses for a menu component with subcomponents.

```APIDOC
## Example: Composing Harnesses for MyMenu

### Description
Demonstrates using locatorFor and locatorForAll to load sub-harnesses within a parent harness.

### Code Example
```typescript
class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

  protected getPopupHarness = this.locatorFor(MyPopupHarness);

  /** Gets the currently shown menu items (empty list if menu is closed). */
  getItems = this.locatorForAll(MyMenuItemHarness);

  /** Toggles open state of the menu. */
  async toggle() {
    const popupHarness = await this.getPopupHarness();
    return popupHarness.toggle();
  }
}

class MyMenuItemHarness extends ComponentHarness {
  static hostSelector = 'my-menu-item';
}
```
```

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

### Example: MyMenuHarness

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

Example of a component harness that uses locatorFor and locatorForAll to load sub-harnesses for MyPopup and MyMenuItem.

```APIDOC
## Example: MyMenuHarness

### Description
Example of a component harness that uses locatorFor and locatorForAll to load sub-harnesses for MyPopup and MyMenuItem.

### Code
```typescript
class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

  protected getPopupHarness = this.locatorFor(MyPopupHarness);

  /** Gets the currently shown menu items (empty list if menu is closed). */
  getItems = this.locatorForAll(MyMenuItemHarness);

  /** Toggles open state of the menu. */
  async toggle() {
    const popupHarness = await this.getPopupHarness();
    return popupHarness.toggle();
  }
}

class MyMenuItemHarness extends ComponentHarness {
  static hostSelector = 'my-menu-item';
}
```
```

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

### Install Angular CDK via CLI

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

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

```bash
ng add @angular/cdk
```

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

### MyPopupHarness Example

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

Example of a custom ComponentHarness that uses TestElement methods to provide narrow-focused methods for user actions and state checks.

```APIDOC
## MyPopupHarness Example

### Description
Example of a custom harness that exposes methods like toggle and isOpen instead of exposing TestElement instances directly.

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

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

### Install Angular Material via CLI

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

Use the Angular CLI schematic to install Angular Material, the CDK, and Angular Animations, while configuring themes, typography, and browser animations.

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

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

### Run local development server

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

Start the local development server to view the application in the browser.

```bash
ng serve
```

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

### MatSortHarness

Source: https://v15.material.angular.dev/components/sort/api

Harness for interacting with a standard mat-sort in tests. Provides methods to get the active header, get all sort headers, get the host element, and create a harness predicate.

```APIDOC
## MatSortHarness

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

### Class
`MatSortHarness extends ComponentHarness`

### Import
`import {MatSortHarness} from '@angular/material/sort/testing';`

### Properties
- `static hostSelector: '.mat-sort'`

### Methods

#### getActiveHeader
Gets the selected header in the `mat-sort`.

**Returns:** `Promise<MatSortHeaderHarness | null>`

#### getSortHeaders
Gets all of the sort headers in the `mat-sort`.

**Parameters:**
- `filter: SortHeaderHarnessFilters = {}`

**Returns:** `Promise<MatSortHeaderHarness[]>`

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

**Returns:** `Promise<TestElement>`

#### static with
Gets a `HarnessPredicate` that can be used to search for a `mat-sort` with specific attributes.

**Parameters:**
- `options: SortHarnessFilters = {}` - Options for narrowing the search.

**Returns:** `HarnessPredicate<MatSortHarness>` - a `HarnessPredicate` configured with the given options.
```

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

### MatIcon Usage Examples

Source: https://v15.material.angular.dev/components/icon/api

Examples of using mat-icon with SVG icons, font ligatures, and font glyphs.

```html
<mat-icon svgIcon="left-arrow"></mat-icon>   <mat-icon svgIcon="animals:cat"></mat-icon>
<mat-icon fontIcon="home"></mat-icon>   <mat-icon>home</mat-icon>   <mat-icon fontSet="myfont" fontIcon="sun"></mat-icon>   <mat-icon fontSet="myfont">sun</mat-icon>
<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>
```

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

### Overlay.create

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

Creates an overlay with an optional configuration and returns a reference to the created overlay.

```APIDOC
## Overlay.create

### Description
Creates an overlay. An overlay is a dynamically added piece of floating UI, used as a low-level building block for other components.

### Method
create

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

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

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

### Creating and Attaching an Overlay

Source: https://v15.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);
```

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

### GlobalPositionStrategy.start

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

Sets the overlay to the start of the viewport, depending on the overlay direction (left in LTR, right in RTL).

```APIDOC
## GlobalPositionStrategy.start

### Description
Sets the overlay to the start of the viewport, depending on the overlay direction. This will be to the left in LTR layouts and to the right in RTL.

### Method
start

### Parameters
- **offset** (string) - Optional - Offset from the edge of the screen. Defaults to ''.

### Returns
- **this** - The strategy instance for chaining.
```

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

### MatDividerHarness

Source: https://v15.material.angular.dev/components/divider/api

Harness for interacting with a mat-divider in tests. It extends ComponentHarness and provides methods to get orientation, check if inset, and get the host element.

```APIDOC
## MatDividerHarness

### Description
Harness for interacting with a mat-divider. It extends ComponentHarness and provides methods to get orientation, check if inset, and get the host element.

### Extends
ComponentHarness

### Static Properties
- **hostSelector** (string) - '.mat-divider'

### Methods

#### getOrientation

Returns a Promise<'horizontal' | 'vertical'>.

#### host

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

Returns Promise<TestElement>.

#### isInset

Returns a Promise<boolean>.

#### static with

Parameters:
- **options** (DividerHarnessFilters) - Default: {}

```

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

### Initialize HarnessLoader for unit tests

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

Shows how to configure a test fixture and create a HarnessLoader using TestbedHarnessEnvironment for a UserProfile component.

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

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

### MatGridListHarness

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

Harness for interacting with a standard MatGridList in tests. Provides methods to get the number of columns, retrieve tiles at specific positions, and get all tiles.

```APIDOC
## MatGridListHarness

### Description
Harness for interacting with a standard MatGridList in tests.

### Import
import {MatGridListHarness} from '@angular/material/grid-list/testing';

### Host Selector
.mat-grid-list

### Methods

#### getColumns
- Description: Gets the amount of columns of the grid-list.
- Returns: Promise<number>

#### getTileAtPosition
- Description: Gets a tile of the grid-list that is located at the given location.
- Parameters:
  - row (number) - Zero-based row index.
  - column (number) - Zero-based column index.
- Returns: Promise<MatGridTileHarness>

#### getTiles
- Description: Gets all tiles of the grid-list.
- Parameters: filters (GridTileHarnessFilters = {})
- Returns: Promise<MatGridTileHarness[]>

#### host
- Description: Gets a Promise for the TestElement representing the host element of the component.
- Returns: Promise<TestElement>

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

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

### Generate Navigation Component

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

Creates a component featuring a toolbar and a responsive side navigation menu.

```bash
ng generate @angular/material:navigation <component-name>
```

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

### MatChipGridHarness

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

Harness for interacting with a mat-chip-grid in tests. Provides methods to get the input harness, get rows, check disabled/invalid/required states, and create a harness predicate.

```APIDOC
## MatChipGridHarness

### Description
Harness for interacting with a mat-chip-grid in tests.

### Properties
- `static hostSelector: '.mat-mdc-chip-grid'`

### Methods

#### getInput
Gets promise of the chip text input harness.

**Parameters**
- `filter` (ChipInputHarnessFilters = {}) - Optional - (no description provided)

**Returns**
- `Promise<MatChipInputHarness | null>`

#### getRows
Gets promise of the harnesses for the chip rows.

**Parameters**
- `filter` (ChipRowHarnessFilters = {}) - Optional - (no description provided)

**Returns**
- `Promise<MatChipRowHarness[]>`

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

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

#### isDisabled
Gets whether the chip grid is disabled.

**Returns**
- `Promise<boolean>`

#### isInvalid
Gets whether the chip grid is invalid.

**Returns**
- `Promise<boolean>`

#### isRequired
Gets whether the chip grid is required.

**Returns**
- `Promise<boolean>`

#### static with
Gets a `HarnessPredicate` that can be used to search for a chip grid with specific attributes.

**Parameters**
- `options` (ChipGridHarnessFilters = {}) - Optional - Options for filtering which chip grid instances are considered a match.

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

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

### Construct a light theme

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

Create a theme configuration map using define-light-theme, specifying color, typography, and density settings.

```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,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

```

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

### MatOptgroupHarness

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

Harness for interacting with an MDC-based mat-optgroup in tests. Provides methods to get label text, get options, check disabled state, and filter groups.

```APIDOC
## MatOptgroupHarness

### Description
Harness for interacting with an MDC-based `mat-optgroup` in tests.

### Import
```typescript
import {MatOptgroupHarness} from '@angular/material/core/testing';
```

### Properties
- `static hostSelector: '.mat-mdc-optgroup'` - Selector used to locate option group instances.

### Methods

#### async getLabelText
Gets the option group's label text.

**Returns:** `Promise<string>`

#### async getOptions
Gets the options that are inside the group.

**Parameters:**
- `filter: OptionHarnessFilters = {}` - Optionally filters which options are included.

**Returns:** `Promise<MatOptionHarness[]>`

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

**Returns:** `Promise<TestElement>`

#### async isDisabled
Gets whether the option group is disabled.

**Returns:** `Promise<boolean>`

#### static with
Gets a `HarnessPredicate` that can be used to search for a option group with specific attributes.

**Parameters:**
- `options: OptgroupHarnessFilters = {}` - Options for filtering which option instances are considered a match.

**Returns:** `HarnessPredicate<T>` - a `HarnessPredicate` configured with the given options.
```

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

### Loading harnesses with TestbedHarnessEnvironment

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

Demonstrates using both the standard loader and the document root loader to interact with components inside and outside the fixture root, such as a dialog appended to the document body.

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

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

### Implement MyMenuHarness and MyMenuItemHarness

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

Example of a harness for MyMenu that uses locator methods to interact with MyPopupHarness and MyMenuItemHarness.

```typescript
class MyMenuHarness extends ComponentHarness {
  static hostSelector = 'my-menu';

  protected getPopupHarness = this.locatorFor(MyPopupHarness);

  /** Gets the currently shown menu items (empty list if menu is closed). */
  getItems = this.locatorForAll(MyMenuItemHarness);

  /** Toggles open state of the menu. */
  async toggle() {
    const popupHarness = await this.getPopupHarness();
    return popupHarness.toggle();
  }
}

class MyMenuItemHarness extends ComponentHarness {
  static hostSelector = 'my-menu-item';
}
```

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

### MatTooltipHarness

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

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

```APIDOC
## MatTooltipHarness

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

### Import
`import {MatTooltipHarness} from '@angular/material/tooltip/testing';`

### Properties
- `static hostSelector: '.mat-mdc-tooltip-trigger'`

### Methods

#### getTooltipText
Gets a promise for the tooltip panel's text.

**Returns:** `Promise<string>`

#### hide
Hides the tooltip.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

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

**Returns:** `Promise<TestElement>`

#### isOpen
Gets whether the tooltip is open.

**Returns:** `Promise<boolean>`

#### show
Shows the tooltip.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### static with
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:** `HarnessPredicate<T>` - a `HarnessPredicate` configured with the given options.
```

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

### MatChipListboxHarness

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

Harness for interacting with a mat-chip-listbox in tests. Provides methods to get chips, get orientation, check disabled/required/multiple states, select chips, and create a harness predicate.

```APIDOC
## MatChipListboxHarness

### Description
Harness for interacting with a mat-chip-listbox in tests.

### Properties
- `static hostSelector: '.mat-mdc-chip-listbox'`

### Methods

#### getChips
Gets the list of chips inside the chip list.

**Parameters**
- `filter` (ChipOptionHarnessFilters = {}) - Optional - Optionally filters which chips are included.

**Returns**
- `Promise<MatChipOptionHarness[]>`

#### getOrientation
Gets whether the orientation of the chip list.

**Returns**
- `Promise<'horizontal' | 'vertical'>`

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

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

#### isDisabled
Gets whether the chip listbox is disabled.

**Returns**
- `Promise<boolean>`

#### isMultiple
Gets whether the chip listbox is in multi selection mode.

**Returns**
- `Promise<boolean>`

#### isRequired
Gets whether the chip listbox is required.

**Returns**
- `Promise<boolean>`

#### selectChips
Selects a chip inside the chip list.

**Parameters**
- `filter` (ChipOptionHarnessFilters = {}) - Optional - An optional filter to apply to the child chips. All the chips matching the filter will be selected.

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

#### static with
Gets a `HarnessPredicate` that can be used to search for a chip listbox with specific attributes.

**Parameters**
- `options` (ChipListboxHarnessFilters = {}) - Optional - Options for narrowing the search.

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

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

### harnessLoaderForAll(selector: string): Promise<HarnessLoader[]>

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

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

```APIDOC
## harnessLoaderForAll(selector: string): Promise<HarnessLoader[]>

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

### Method
harnessLoaderForAll

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

### Returns
- **Promise<HarnessLoader[]>** - A Promise that resolves to an array of HarnessLoader instances, each rooted at a matching element.
```

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

### Customize strong focus indicators

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

This example shows how to pass a configuration map to 'strong-focus-indicators' to change border properties and how to provide a specific CSS color value to 'strong-focus-indicators-theme'.

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

@include mat.core();
@include mat.strong-focus-indicators((
  border-style: dotted,
  border-width: 4px,
  border-radius: 2px,
));

$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);
@include mat.strong-focus-indicators-theme(purple);
```

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

### Running the MDC Migration Schematic

Source: https://v15.material.angular.dev/guide/mdc-migration

Command to execute the migration tool that updates TypeScript, styles, and templates to the new MDC-based components.

```bash
ng generate @angular/material:mdc-migration
```

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

### MatDrawerHarness

Source: https://v15.material.angular.dev/components/sidenav/api

Harness for interacting with a standard mat-drawer in tests. Provides methods to query child loaders, get harnesses, retrieve drawer mode and position, check if open, and get the host element.

```APIDOC
## MatDrawerHarness

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

### Properties
- static hostSelector: '.mat-drawer' - The selector for the host element of a MatDrawer instance.

### Methods

#### async getAllChildLoaders
- Parameters: selector S
- Returns: Promise<HarnessLoader[]>

#### async getAllHarnesses
- Parameters: query HarnessQuery<T>
- Returns: Promise<T[]>

#### async getChildLoader
- Parameters: selector S
- Returns: Promise<HarnessLoader>

#### async getHarness
- Parameters: query HarnessQuery<T>
- Returns: Promise<T>

#### async getHarnessOrNull
- Parameters: query HarnessQuery<T>
- Returns: Promise<T | null>

#### getMode
- Description: Gets the mode that the drawer is in.
- Returns: Promise<'over' | 'push' | 'side'>

#### getPosition
- Description: Gets the position of the drawer inside its container.
- Returns: Promise<'start' | 'end'>

#### async hasHarness
- Parameters: query HarnessQuery<T>
- Returns: Promise<boolean>

#### async host
- Description: Gets a Promise for the TestElement representing the host element of the component.
- Returns: Promise<TestElement>

#### isOpen
- Description: Whether the drawer is open.
- Returns: Promise<boolean>

#### static with
- Description: Gets a HarnessPredicate that can be used to search for a MatDrawerHarness that meets certain criteria.
- Parameters: options DrawerHarnessFilters = {} - Options for filtering which drawer instances are considered a match.
- Returns: HarnessPredicate<MatDrawerHarness> - a HarnessPredicate configured with the given options.
```

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

### MatChipRowHarness

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

Harness for interacting with a mat-chip-row in tests. Provides methods to get text, check disabled/editable/editing states, start/finish editing, get edit input, remove button, avatar, and remove the chip.

```APIDOC
## MatChipRowHarness

### Description
Harness for interacting with a mat-chip-row in tests.

### Host Selector
`.mat-mdc-chip-row`

### Methods

#### finishEditing()
Stops editing the chip, if it was in the editing state.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### getAvatar(filter?: ChipAvatarHarnessFilters = {})
Gets the avatar inside a chip.

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

**Returns:** `Promise<MatChipAvatarHarness | null>`

#### getEditInput(filter?: ChipEditInputHarnessFilters = {})
Gets the edit input inside the chip row.

**Parameters:**
- `filter` (ChipEditInputHarnessFilters) - Optional - Filters for the edit input.

**Returns:** `Promise<MatChipEditInputHarness>`

#### getRemoveButton(filter?: ChipRemoveHarnessFilters = {})
Gets the remove button inside of a chip.

**Parameters:**
- `filter` (ChipRemoveHarnessFilters) - Optional - Optionally filters which chips are included.

**Returns:** `Promise<MatChipRemoveHarness>`

#### getText()
Gets a promise for the text content the option.

**Returns:** `Promise<string>`

#### isDisabled()
Whether the chip is disabled.

**Returns:** `Promise<boolean>`

#### isEditable()
Whether the chip is editable.

**Returns:** `Promise<boolean>`

#### isEditing()
Whether the chip is currently being edited.

**Returns:** `Promise<boolean>`

#### remove()
Delete a chip from the set.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### startEditing()
Sets the chip row into an editing state, if it is editable.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### Inherited Methods (from MatChipHarness and ComponentHarness)
- `getAllChildLoaders(selector: S)` - Returns `Promise<HarnessLoader[]>`
- `getAllHarnesses(query: HarnessQuery<T>)` - Returns `Promise<T[]>`
- `getChildLoader(selector: S)` - Returns `Promise<HarnessLoader>`
- `getHarness(query: HarnessQuery<T>)` - Returns `Promise<T>`
- `getHarnessOrNull(query: HarnessQuery<T>)` - Returns `Promise<T | null>`
- `hasHarness(query: HarnessQuery<T>)` - Returns `Promise<boolean>`
- `host()` - Returns `Promise<TestElement>`
```

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

### MatChipRemove usage example

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

Demonstrates how to use the matChipRemove directive with a mat-icon to enable chip removal.

```html
<mat-chip>
  <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
```

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

### MatPaginatorHarness

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

Harness for interacting with an MDC-based mat-paginator in tests. Provides methods to get page size, range label, navigate pages, check button states, set page size, and get the host element.

```APIDOC
## MatPaginatorHarness

### Description
Harness for interacting with an MDC-based mat-paginator in tests.

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

### Properties
- `static hostSelector: '.mat-mdc-paginator'` - Selector used to find paginator instances.

### Methods

#### getPageSize()
Gets the page size of the paginator.

**Returns:** `Promise<number>`

#### getRangeLabel()
Gets the text of the range label of the paginator.

**Returns:** `Promise<string>`

#### goToFirstPage()
Goes to the first page in the paginator.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### goToLastPage()
Goes to the last page in the paginator.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### goToNextPage()
Goes to the next page in the paginator.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### goToPreviousPage()
Goes to the previous page in the paginator.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

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

**Returns:** `Promise<TestElement>`

#### isNextPageDisabled()
Returns whether or not the next page button is disabled.

**Returns:** `Promise<boolean>`

#### isPreviousPageDisabled()
Returns whether or not the previous page button is disabled.

**Returns:** `Promise<boolean>`

#### setPageSize(size: number)
Sets the page size of the paginator.

**Parameters:**
- `size` (number) - Page size that should be selected.

**Returns:** `Promise<void>` - Promise that resolves when the action completes.

#### static with(options: PaginatorHarnessFilters = {})
Gets a `HarnessPredicate` that can be used to search for a paginator with specific attributes.

**Parameters:**
- `options` (PaginatorHarnessFilters) - Options for filtering which paginator instances are considered a match.

**Returns:** `HarnessPredicate<T>` - a `HarnessPredicate` configured with the given options.
```

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

### async harnessLoaderForAll

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

Gets a list of `HarnessLoader` instances, one for each matching element.

```APIDOC
## async harnessLoaderForAll

### Description
Gets a list of `HarnessLoader` instances, one for each matching element.

### Parameters
- `selector` (string) - The selector for the root element.

### Returns
- `Promise<HarnessLoader[]>` - A list of `HarnessLoader`, one rooted at each element matching the given selector.
```

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

### DateAdapter.today

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

Gets today's date.

```APIDOC
## today

### Description
Gets today's date.

### Method
today

### Returns
- **D** - Today's date.
```

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

### Example #2: Duplicative individual component mixins

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

Using individual component themes like 'mat.button-theme' can also trigger redundant density style generation.

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

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

### Multi-line Selection List

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

Demonstrates two and three-line list items using matListItemLine and matListItemTitle.

```html
<!-- two line list -->
<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <h3 matListItemTitle>{{message.from}}</h3>
    <p matListItemLine>
      <span>{{message.subject}}</span>
      <span class="demo-2"> -- {{message.content}}</span>
    </p>
  </mat-list-item>
</mat-list>

<!-- three line list -->
<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <h3 matListItemTitle>{{message.from}}</h3>
    <p matListItemLine>{{message.subject}}</p>
    <p matListItemLine class="demo-2">{{message.content}}</p>
  </mat-list-item>
</mat-list>
```

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

### invalid

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

Gets date instance that is not valid.

```APIDOC
## invalid

### Description
Gets date instance that is not valid.

### Returns
- **D** - An invalid date.
```

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

### getMonthNames

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

Gets a list of names for the months.

```APIDOC
## getMonthNames

### Description
Gets a list of names for the months.

### Parameters
- **style** ("long" | "short" | "narrow") - Required - The naming style (e.g. long = 'January', short = 'Jan', narrow = 'J').

### Returns
- **string[]** - An ordered list of all month names, starting with January.
```

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

### Example #1: Fixed theme styles

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

Replace 'all-component-themes' with 'all-component-colors' inside the '.dark-theme' selector to ensure only color styles are generated.

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

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

### Opening a snackbar

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

Demonstrates how to open a snackbar with a simple message, a message with an action, or a custom component.

```typescript
// Simple message.
let snackBarRef = snackBar.open('Message archived');

// Simple message with an action.
let snackBarRef = snackBar.open('Message archived', 'Undo');

// Load the given component into the snackbar.
let snackBarRef = snackBar.openFromComponent(MessageArchivedComponent);
```

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

### getFirstDayOfWeek

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

Gets the first day of the week.

```APIDOC
## getFirstDayOfWeek

### Description
Gets the first day of the week.

### Returns
- **number** - The first day of the week (0-indexed, 0 = Sunday).
```

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

### getYearName

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

Gets the name for the year of the given date.

```APIDOC
## getYearName

### Description
Gets the name for the year of the given date.

### Parameters
- **date** (D) - Required - The date to get the year name for.

### Returns
- **string** - The name of the given year (e.g. '2017').
```

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

### ComponentPortal instantiation

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

Shows how to create a portal from a component type within the ngAfterViewInit lifecycle hook.

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

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

### getYear

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

Gets the year component of the given date.

```APIDOC
## getYear

### Description
Gets the year component of the given date.

### Parameters
- **date** (D) - Required - The date to extract the year from.

### Returns
- **number** - The year component.
```

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

### FocusKeyManager withWrap method

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

Method to enable wrapping navigation through options in a ListKeyManager. It is called on a FocusKeyManager instance.

```APIDOC
## FocusKeyManager.withWrap()

### Description
Enables wrapping navigation through options in a ListKeyManager.

### Usage
```
this.keyManager = new FocusKeyManager(...).withWrap();
```
```

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

### getMonth

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

Gets the month component of the given date.

```APIDOC
## getMonth

### Description
Gets the month component of the given date.

### Parameters
- **date** (D) - Required - The date to extract the month from.

### Returns
- **number** - The month component (0-indexed, 0 = January).
```

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

### Basic Usage of SelectionModel

Source: https://v15.material.angular.dev/cdk/collections

Demonstrates initializing a SelectionModel with multiple selection enabled and initial values, followed by common operations like select, deselect, toggle, checking selection status, sorting, and subscribing to changes.

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

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

### open(), close(), toggle() methods

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

These methods open, close, or toggle the sidenav. Each returns a Promise<boolean> that resolves to true when the sidenav finishes opening or false when it finishes closing.

```APIDOC
## open(), close(), toggle() methods

### Description
Opens, closes, or toggles the sidenav. Each method returns a Promise<boolean> that resolves to true when the sidenav finishes opening or false when it finishes closing.

### Method
open(), close(), toggle()

### Parameters
None.

### Returns
Promise<boolean> - Resolves to true when the sidenav finishes opening, false when it finishes closing.

### Usage Example
```typescript
const promise = sidenav.open();
const promise = sidenav.close();
const promise = sidenav.toggle();
```
```
Tokens:
Raw