### Basic Drawer Example (Angular)

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

Provides a fundamental example of a Material Angular drawer component. This snippet illustrates the basic setup for a drawer, including its content and how to open and close it. It serves as a starting point for more complex drawer implementations.

```html
<mat-drawer-container class="example-container">
  <mat-drawer #drawer mode="end">Drawer content</mat-drawer>

  <div class="example-content">
    <p>Main content</p>

    <button mat-button (click)="drawer.open()">Open drawer</button>
  </div>
</mat-drawer-container>

```

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

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

```

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

### Install Angular Material using Angular CLI

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

Installs Angular Material and its dependencies using the Angular CLI's `ng add` command. This command also configures the project by adding global styles, fonts, and prompts for theme and typography preferences.

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

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

### Getting Started with CdkMenuModule

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

Instructions on how to import the `CdkMenuModule` and use its directives to build custom menu interactions.

```APIDOC
## Getting Started with CdkMenuModule

### Description
To start using the menu directives, import `CdkMenuModule` into your `NgModule`. This section provides a basic example of a menu structure.

### Basic Menu Example

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

### Key Directives

*   `cdkMenuTriggerFor`: Links a trigger element to an `ng-template` containing the menu.
*   `cdkMenu`: Creates the menu content.
*   `cdkMenuItem`: Applied to each item within the menu.
```

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

### Run Angular Development Server

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

Starts the local development server for your Angular application. This command compiles your application and serves it locally, typically at http://localhost:4200, allowing you to view changes in real-time.

```bash
ng serve
```

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

### Datepicker - Start Date

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

Demonstrates setting a start date for the datepicker, which influences the initial view and available selection range.

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

/** 
 * @title Datepicker start date
 */
@Component({
  selector: 'datepicker-start-date-example',
  templateUrl: 'datepicker-start-date-example.html',
  styleUrls: ['datepicker-start-date-example.css']
})
export class DatepickerStartDateExample {}

```

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

### Responsive Sidenav Example (Angular)

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

Illustrates how to create a responsive sidenav using Material Angular. This example adapts the sidenav's behavior and visibility based on screen size, ensuring an optimal user experience across various devices. It typically involves using media queries or Angular's breakpoint observation.

```html
<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" [disableClose]="!hasBackdrop"
               [position]="position" [fixedInViewport]="true"
               [fixedTopGap]="0" [fixedBottomGap]="0">
    <p>Sidenav content</p>
    <button mat-button (click)="sidenav.toggle()">Toggle</button>
  </mat-sidenav>

  <div class="example-content" [style.margin-left.px]="sidenav.opened && sidenav.position === 'start' ? sidenav.offsetWidth : 0">
    <p>Main content</p>
    <button mat-button (click)="opened = !opened">Toggle sidenav</button>
    <p>Fixed sidenav</p>
    <mat-checkbox [(ngModel)]="hasBackdrop">Enable backdrop</mat-checkbox>
    <p>Position</p>
    <mat-radio-group [(ngModel)]="position">
      <mat-radio-button value="start">Start</mat-radio-button>
      <mat-radio-button value="end">End</mat-radio-button>
    </mat-radio-group>
  </div>
</mat-sidenav-container>

```

```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 {
  opened = true;
  hasBackdrop = true;
  position = 'start';
}

```

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

### Testing with MatChipsHarness Example - Angular

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

Provides an example of how to test Material Angular Chips using the `MatChipsHarness`. This is crucial for ensuring the functionality of chips in your application. Requires `@angular/material/testing`.

```typescript
import {TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MatChipsModule} from '@angular/material/chips';
import {ChipsHarnessExample} from './chips-harness-example';
import {MatChipHarness} from '@angular/material/chips/testing';

describe('ChipsHarnessExample', () => {
  let fixture: ComponentFixture<ChipsHarnessExample>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatChipsModule, ChipsHarnessExample],
    }).compileComponents();
    fixture = TestBed.createComponent(ChipsHarnessExample);
    fixture.detectChanges();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should load harnesses', async () => {
    const chips = await loader.getAllHarnesses(MatChipHarness);
    expect(chips.length).toBe(3);
  });

  it('should get chip text', async () => {
    const firstChip = await loader.getHarness(MatChipHarness.with({selector: '#chip1'}));
    expect(await firstChip.getText()).toEqual('Chip 1');
  });

  it('should remove a chip', async () => {
    const chipToRemove = await loader.getHarness(MatChipHarness.with({selector: '#chip2'}));
    await chipToRemove.remove();
    const chips = await loader.getAllHarnesses(MatChipHarness);
    expect(chips.length).toBe(2);
  });

  it('should select a chip', async () => {
    const chipToSelect = await loader.getHarness(MatChipHarness.with({selector: '#chip3'}));
    await chipToSelect.select();
    expect(await chipToSelect.isSelected()).toBe(true);
  });
});

```

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

### Sidenav with Configurable Mode Example (Angular)

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

This example demonstrates a sidenav where the display mode can be configured dynamically. Users can switch between 'side', 'over', and 'push' modes, allowing for flexible layout adjustments based on user preference or screen size. This enhances the adaptability of the sidenav component.

```html
<mat-sidenav-container>
  <mat-sidenav #sidenav mode="{{mode}}">
    <p>Sidenav content</p>
  </mat-sidenav>

  <div class="example-content">
    <p>Main content goes here</p>
    <button mat-button (click)="sidenav.open()">Open</button>
    <button mat-button (click)="sidenav.close()">Close</button>
    <button mat-button (click)="sidenav.toggle()">Toggle</button>
    <p>Sidenav mode</p>
    <mat-radio-group [(ngModel)]="mode">
      <mat-radio-button value="over">Over</mat-radio-button>
      <mat-radio-button value="push">Push</mat-radio-button>
      <mat-radio-button value="side">Side</mat-radio-button>
    </mat-radio-group>
  </div>
</mat-sidenav-container>

```

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

/** @title Sidenav with configurable mode */
@Component({
  selector: 'sidenav-configurable-example',
  templateUrl: 'sidenav-configurable-example.html',
  styleUrls: ['sidenav-configurable-example.css']
})
export class SidenavConfigurableExample {
  mode = 'over';
}

```

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

### Basic Progress Spinner Example - HTML

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

Demonstrates the basic implementation of a Material Angular progress spinner using HTML. This example shows how to include the component in your template.

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

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

### Angular Material Stepper: Basic Horizontal and Vertical Layouts

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

Demonstrates the basic structure and enabling linear mode for both horizontal and vertical Angular Material steppers. These examples show the fundamental setup for step navigation.

```html
<mat-stepper linear>
  <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>
```

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

### Implicit Main Content with Two Sidenavs Example (Angular)

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

This example demonstrates how to structure a layout with two sidenavs and implicit main content using Material Angular. It shows how the main content area automatically adapts its layout when both a start and end sidenav are present, simplifying complex page structures.

```html
<mat-sidenav-container>
  <mat-sidenav #start mode="side" opened position="start">
    <span>Start sidenav</span>
  </mat-sidenav>

  <mat-sidenav #end mode="side" opened position="end">
    <span>End sidenav</span>
  </mat-sidenav>

  <div class="example-content">
    <p>Implicit main content</p>
  </div>
</mat-sidenav-container>

```

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

/** @title Implicit main content with two sidenavs */
@Component({
  selector: 'sidenav-two-line-example',
  templateUrl: 'sidenav-two-line-example.html',
  styleUrls: ['sidenav-two-line-example.css']
})
export class SidenavTwoLineExample {}

```

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

### Basic Date Range Picker

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

A fundamental example of a date range picker, allowing users to select both a start and an end date with a specified input format.

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

/** 
 * @title Basic date range picker
 */
@Component({
  selector: 'datepicker-range-basic-example',
  templateUrl: 'datepicker-range-basic-example.html',
  styleUrls: ['datepicker-range-basic-example.css']
})
export class DatepickerRangeBasicExample {}

```

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

### Basic Datepicker Example

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

A straightforward example of the basic Material Angular datepicker component, showing its default appearance and functionality.

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

/** 
 * @title Basic datepicker
 */
@Component({
  selector: 'datepicker-basic-example',
  templateUrl: 'datepicker-basic-example.html',
  styleUrls: ['datepicker-basic-example.css']
})
export class DatepickerBasicExample {}

```

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

### Basic Chips Example - Angular

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

A simple implementation of Material Angular Chips, displaying static or dynamically added items. This serves as a foundational example for using chips. Requires `MatChipsModule`.

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

```

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

/**
 * @title Basic Chips
 */
@Component({
  selector: 'chips-basic-example',
  templateUrl: 'chips-basic-example.html',
  styleUrls: ['chips-basic-example.css']
})
export class ChipsBasicExample {
}

```

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

### Basic Sidenav Example (Angular)

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

Presents a straightforward implementation of the Material Angular sidenav component. This basic example serves as an entry point for understanding the core structure and functionality of a sidenav, including its content and basic interaction triggers.

```html
<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" opened>
    <p>Sidenav content</p>
  </mat-sidenav>

  <div class="example-content">
    <p>Main content goes here</p>
  </div>
</mat-sidenav-container>

```

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

/** @title Basicsidenav */
@Component({
  selector: 'sidenav-overview-example',
  templateUrl: 'sidenav-overview-example.html',
  styleUrls: ['sidenav-overview-example.css']
})
export class SidenavOverviewExample {}

```

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

### Autosize Sidenav Example (Angular)

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

Demonstrates an auto-resizing sidenav component. This example allows the sidenav to adjust its size automatically, enhancing usability on different screen sizes. No specific external dependencies are highlighted beyond the core Angular Material library.

```html
<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav opened mode="over" class="example-sidenav">
    <p>Sidenav content</p>
  </mat-sidenav>

  <div class="example-content">
    <button (click)="sidenav.toggle()" mat-button>Toggle sidenav</button>
    <p>Main content goes here</p>
  </div>
</mat-sidenav-container>

```

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

/** @title Autosize sidenav */
@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css']
})
export class SidenavAutosizeExample {}

```

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

### Chips with Input Example - Angular

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

Demonstrates creating Material Angular Chips that can have values entered by the user via an input field. This is similar to the autocomplete example but focuses on the input aspect. Requires `MatChipsModule`.

```html
<mat-chip-listbox aria-label="Fruit selection">
  <mat-chip-option *ngFor="let fruit of fruits" (removed)="remove(fruit)">
    {{fruit.name}}
    <mat-icon matChipRemove>cancel</mat-icon>
  </mat-chip-option>
</mat-chip-listbox>
<input #fruitInput placeholder="New fruit..."
       [matChipInputFor]="chipList"
       [matChipInputAddOnBlur]="addOnBlur"
       (matChipInputTokenEnd)="add($event)">

```

```typescript
import {Component, ElementRef, ViewChild} from '@angular/core';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {MatChipInputEvent} from '@angular/material/chips';

interface Fruit {
  name: string;
}

/**
 * @title Chips with Input
 */
@Component({
  selector: 'chips-input-example',
  templateUrl: 'chips-input-example.html',
  styleUrls: ['chips-input-example.css']
})
export class ChipsInputExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes = [ENTER, COMMA] as const;
  fruits: Fruit[] = [
    {name: 'Lemon'},
    {name: 'Apple'},
    {name: 'Lime'},
  ];

  @ViewChild('chipList') chipList: any;
  @ViewChild('fruitInput') fruitInput!: ElementRef<HTMLInputElement>;

  add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // Add our fruit
    if (value) {
      this.fruits.push({name: value});
    }

    // Clear the input value
    event.chipInput!.clear();
  }

  remove(fruit: Fruit): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }
}

```

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

### Testing with MatSidenavHarness Example (Angular)

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

This example includes tests for the MatSidenavHarness in Angular. It showcases how to interact with and test sidenav components programmatically using harness utilities. This is crucial for ensuring the reliability and correctness of sidenav implementations in larger applications.

```typescript
import {
  TestBed,
  ComponentFixture
} from '@angular/core/testing';
import {
  MatSidenavModule
} from '@angular/material/sidenav';
import {
  MatSidenavHarness
} from '@angular/material/sidenav/testing';
import {
  BrowserDynamicTestingModule
} from '@angular/platform-browser-dynamic/testing';
import {
  SidenavHarnessExample
} from './sidenav-harness-example';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatSidenavModule, BrowserDynamicTestingModule],
      declarations: [SidenavHarnessExample]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SidenavHarnessExample);
    fixture.detectChanges();
  });

  it('should open and close the sidenav', async () => {
    const sidenav = await MatSidenavHarness.with({
      selector: '#sidenav'
    });

    expect(await sidenav.isOpen()).toBe(true);
    await sidenav.close();
    expect(await sidenav.isOpen()).toBe(false);
    await sidenav.open();
    expect(await sidenav.isOpen()).toBe(true);
  });
});

```

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

### Drawer with Explicit Backdrop Setting (Angular)

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

Shows a sidenav (drawer) with explicit control over its backdrop. This example allows for custom configurations regarding how the backdrop behaves when the sidenav is open. It's useful for fine-tuning user interaction and visual feedback.

```html
<mat-drawer-container class="example-container">
  <mat-drawer #drawer mode="end" [hasBackdrop]="true">Drawer content</mat-drawer>

  <div class="example-content">
    <p>I'm a drawer</p>
    <button (click)="drawer.open()" mat-button>Open drawer</button>
    <p>Sidenav mode</p>
    <mat-radio-group [(ngModel)]="drawerMode">
      <mat-radio-button value="side">Side</mat-radio-button>
      <mat-radio-button value="over">Over</mat-radio-button>
      <mat-radio-button value="push">Push</mat-radio-button>
    </mat-radio-group>
    <p>Has backdrop</p>
    <mat-checkbox [(ngModel)]="drawerHasBackdrop">Toggle backdrop</mat-checkbox>
    <button (click)="drawer.toggle()" mat-button>Toggle drawer</button>
  </div>
</mat-drawer-container>

```

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

/** @title Drawer with explicit backdrop setting */
@Component({
  selector: 'drawer-backdrop-setting-example',
  templateUrl: 'drawer-backdrop-setting-example.html',
  styleUrls: ['drawer-backdrop-setting-example.css']
})
export class DrawerBackdropSettingExample {
  drawerMode = 'side';
  drawerHasBackdrop = true;
}

```

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

### Basic Checkboxes (HTML)

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

A simple example demonstrating the basic usage of Material Angular checkboxes, including options for primary, accent, and warn themes, 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>
```

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

### Testing Checkboxes with MatCheckboxHarness (TypeScript)

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

This example showcases how to use `MatCheckboxHarness` to interact with and test Material Angular checkboxes in an automated testing environment. It requires the Angular CDK testing utilities.

```typescript
import {TestBed} from '@angular/core/testing';
import {MatCheckboxHarness} from '@angular/material/checkbox/testing';
import {CheckboxHarnessExample} from './checkbox-harness-example';

describe('CheckboxHarness', () => {
  let fixture;
  let harness;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CheckboxHarnessExample]
    });
    fixture = TestBed.createComponent(CheckboxHarnessExample);
    fixture.detectChanges();
    harness = await TestBed.getHarness(MatCheckboxHarness);
  });

  it('should be able to click the checkbox', async () => {
    await harness.click();
    expect(await harness.isChecked()).toBe(true);
  });

  it('should be able to toggle the checkbox', async () => {
    await harness.toggle();
    expect(await harness.isChecked()).toBe(true);
  });

  it('should check if the checkbox is checked', async () => {
    expect(await harness.isChecked()).toBe(false);
  });

  it('should check if the checkbox is disabled', async () => {
    expect(await harness.isDisabled()).toBe(false);
  });

  it('should check if the checkbox is indeterminate', async () => {
    expect(await harness.isIndeterminate()).toBe(false);
  });

  it('should get the label of the checkbox', async () => {
    expect(await harness.getLabel()).toBe('I'm a checkbox');
  });
});

```

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

### Angular Basic Grid List

Source: https://v14.material.angular.dev/components/grid-list/examples

Presents a basic grid list example using Angular Material, showcasing a simple 4-column layout with fixed rows. It utilizes the 'mat-grid-list' and 'mat-grid-tile' components.

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

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

/** @title Basic grid-list */
@Component({
  selector: 'grid-list-basic-example',
  templateUrl: 'grid-list-basic-example.html',
  styleUrls: ['grid-list-basic-example.css'],
})
export class GridListBasicExample {}
```

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

### MatStartDateHarness API

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

API for interacting with the start date input of a Material date range picker in tests.

```APIDOC
## MatStartDateHarness

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

### Properties
* `hostSelector`: `.mat-start-date`

### Methods

#### `blur()`

**Description:** Blurs the input and returns a promise that indicates when the action is complete.

**Method:** N/A (method of the harness instance)

**Returns:** `Promise<void>`

#### `focus()`

**Description:** Focuses the input and returns a promise that indicates when the action is complete.

**Method:** N/A (method of the harness instance)

**Returns:** `Promise<void>`

#### `getMax()`

**Description:** Gets the formatted maximum date for the input's value.

**Method:** N/A (method of the harness instance)

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

#### `getMin()`

**Description:** Gets the formatted minimum date for the input's value.

**Method:** N/A (method of the harness instance)

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

#### `getPlaceholder()`

**Description:** Gets the placeholder of the input.

**Method:** N/A (method of the harness instance)

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

#### `getValue()`

**Description:** Gets the value of the input.

**Method:** N/A (method of the harness instance)

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

#### `host()`

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

**Method:** N/A (method of the harness instance)

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

#### `isDisabled()`

**Description:** Whether the input is disabled.

**Method:** N/A (method of the harness instance)

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

#### `isFocused()`

**Description:** Whether the input is focused.

**Method:** N/A (method of the harness instance)

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

#### `isRequired()`

**Description:** Whether the input is required.

**Method:** N/A (method of the harness instance)

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

#### `setValue(newValue: string)`

**Description:** Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

**Method:** N/A (method of the harness instance)

**Parameters:**
* `newValue` (string) - The new value to set for the input.

**Returns:** `Promise<void>`

### Static Methods

#### `with(options?: DatepickerInputHarnessFilters)`

**Description:** Gets a `HarnessPredicate` that can be used to search for a `MatStartDateHarness` that meets certain criteria.

**Method:** `static with()`

**Parameters:**
* `options` (DatepickerInputHarnessFilters) - Optional - Options for filtering which input instances are considered a match.

**Returns:** `HarnessPredicate<MatStartDateHarness>` - A `HarnessPredicate` configured with the given options.

```

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

### TestbedHarnessEnvironment API

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

Provides static methods for creating HarnessLoader instances and ComponentHarness instances within a testbed environment (e.g., Karma).

```APIDOC
## TestbedHarnessEnvironment

### Description
Provides static methods for creating `HarnessLoader` and `ComponentHarness` instances in a testbed environment.

### Methods

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

- **Description**: Gets a `HarnessLoader` instance for the given fixture, rooted at the fixture's root element. Used for loading harnesses contained within the fixture.
- **Parameters**:
  - `fixture` (ComponentFixture<unknown>) - Required - The component fixture to get the loader for.

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

- **Description**: Gets a `HarnessLoader` instance for the given fixture, rooted at the HTML document's root element. Used for loading harnesses that are outside the fixture's root element (e.g., appended to `document.body`).
- **Parameters**:
  - `fixture` (ComponentFixture<unknown>) - Required - The component fixture to get the document root loader for.

#### `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. Necessary when bootstrapping the test with the component for which you want to load a harness.
- **Parameters**:
  - `fixture` (ComponentFixture<unknown>) - Required - The component fixture.
  - `harnessType` (ComponentHarnessConstructor<T>) - Required - The constructor of the `ComponentHarness` to instantiate.

### Example Usage
```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
  const dialogButtonHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, MyDialogButtonHarness);

  // Load a harness for an element within the fixture
  const buttonHarness = await loader.getHarness(MyButtonHarness);
  await buttonHarness.click();

  // Load a harness for an element outside the fixture (e.g., in document.body)
  const dialogHarness = await rootLoader.getHarness(MyDialogHarness);
});
```
```

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

### Create and Attach Overlay Content (TypeScript)

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

Demonstrates the basic process of creating an overlay instance using `overlay.create()`. It then shows how to attach content to this overlay by creating a `ComponentPortal` and attaching it to the `OverlayRef`.

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

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

### Add MatSlider component to template

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

Includes the Angular Material slider component in your application's HTML template. This example shows how to set minimum, maximum, step, and initial values for the slider.

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

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

### Invalid Sidenav Layout: Duplicate Start Positions (HTML)

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

An example of an invalid sidenav layout where two sidenavs are positioned on the 'start' side, which is not permitted.

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

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

### Harness Loading and Querying

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

Methods for retrieving harnesses for the expansion panel and its children, allowing for detailed inspection and interaction with nested components.

```APIDOC
## Harness Loading and Querying

### `async getAllChildLoaders(selector: S)`

Gets all harness loaders for child components matching the given selector.

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

Gets all harnesses for components matching the given query.

### `async getChildLoader(selector: S)`

Gets a harness loader for the first child component matching the given selector.

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

Gets the harness for the first component matching the given query.

### `async getHarnessOrNull(query: HarnessQuery<T>)`

Gets the harness for the first component matching the given query, or null if none is found.

### `async hasHarness(query: HarnessQuery<T>)`

Checks if a component matching the given query exists.
```

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

### Date Range Picker - Comparison Ranges

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

Example of a date range picker used for comparing date ranges, with clear input fields for start and end dates and a predefined format.

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

/** 
 * @title Date range picker comparison ranges
 */
@Component({
  selector: 'datepicker-range-comparison-example',
  templateUrl: 'datepicker-range-comparison-example.html',
  styleUrls: ['datepicker-range-comparison-example.css']
})
export class DatepickerRangeComparisonExample {}

```

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

### Working with Asynchronous Methods

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

Explains how to use ES2017 `async`/`await` syntax for asynchronous harness methods and introduces the `parallel` function for executing multiple asynchronous operations simultaneously.

```APIDOC
## Working with Asynchronous Component Harness Methods

### Description
Most harness methods are asynchronous and return Promises to support both unit and end-to-end tests and insulate tests from changes in asynchronous behavior. The recommended approach is to use ES2017 `async`/`await` syntax for readability. For scenarios requiring simultaneous execution of multiple asynchronous operations, the `parallel` function can be used, which optimizes change detection and works similarly to `Promise.all`.

### Usage with `async`/`await`
```typescript
// Standard usage with async/await
const harness = await loader.getHarness(MyComponentHarness);
await harness.someAsyncAction();
```

### Usage with `parallel`
```typescript
it('reads properties in parallel', async () => {
  const checkboxHarness = loader.getHarness(MyCheckboxHarness);
  // Read the checked and intermediate properties simultaneously.
  const [checked, indeterminate] = await parallel(() => [
    checkboxHarness.isChecked(),
    checkboxHarness.isIndeterminate()
  ]);
  expect(checked).toBe(false);
  expect(indeterminate).toBe(true);
});
```
```

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

### Harness Best Practices

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

Guidelines on how to best use TestElement instances within component harnesses to avoid exposing internal DOM structures.

```APIDOC
## Harness Best Practices

### Description
This section outlines best practices for using `TestElement` instances within component harnesses. It emphasizes providing focused methods for component consumers rather than exposing raw DOM elements.

### Key Recommendations

- **Avoid exposing `TestElement` instances to users of a harness** unless it's a host element or an element the consumer explicitly defines.
- **Exposing internal `TestElement` instances can lead users to depend on a component's internal DOM structure**, making components brittle.
- **Instead, provide narrow-focused methods** for specific user actions or state checks.

### Example: `MyPopupHarness`

```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(): Promise<void> {
    const trigger = await this.getTriggerElement();
    return trigger.click();
  }

  /** Checks if the popup is open. */
  async isOpen(): Promise<boolean> {
    const content = await this.getContentElement();
    return !!content;
  }
}
```

This example demonstrates how `MyPopupHarness` provides `toggle` and `isOpen` methods instead of exposing the trigger or content elements directly.
```

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

### Import MatSliderModule and configure AppModule

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

Imports the `MatSliderModule` into your Angular application's `AppModule`. This makes the slider component available for use within your application. Ensure this is added to the `imports` array of your `@NgModule` configuration.

```typescript
import { MatSliderModule } from '@angular/material/slider';

@NgModule ({
  imports: [
    MatSliderModule,
  ]
})
class AppModule {}
```

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

### Setup HarnessLoader for Angular Unit Tests

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

This code demonstrates how to set up a `HarnessLoader` for Angular unit tests using `TestbedHarnessEnvironment`. It initializes the testing module, creates a component fixture, and obtains a `HarnessLoader` instance to interact with Angular Material components within the fixture. This is crucial for writing tests that are independent of component DOM structure.

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


```

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

### Date Range Input and Picker Setup

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

Implements a date range selection interface using `mat-date-range-input` and `mat-date-range-picker`. This component requires two input elements for start and end dates and connects them to a shared picker popup. It's suitable for selecting a period.

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

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

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

### MatRadioGroupHarness API

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

Harness for interacting with a standard mat-radio-group in tests. Provides methods to check radio buttons, get checked radio buttons, get checked values, get IDs, get names, get all radio buttons, and interact with the host element.

```APIDOC
## MatRadioGroupHarness

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

### Methods

#### async checkRadioButton(filter?: ButtonFilters): Promise<void>

**Description:** Checks a radio button in this group. The first radio button matching the filter will be checked.

**Parameters:**
- `filter` (ButtonFilters) - Optional: An optional filter to apply to the child radio buttons.

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

#### async getCheckedRadioButton(): Promise<Button | null>

**Description:** Gets the checked radio-button in a radio-group.

**Returns:**
- `Promise<Button | null>` - The checked radio button or null if none is checked.

#### async getCheckedValue(): Promise<string | null>

**Description:** Gets the checked value of the radio-group.

**Returns:**
- `Promise<string | null>` - The value of the checked radio button or null.

#### async getId(): Promise<string | null>

**Description:** Gets the id of the radio-group.

**Returns:**
- `Promise<string | null>` - The ID of the radio group.

#### async getName(): Promise<string | null>

**Description:** Gets the name of the radio-group.

**Returns:**
- `Promise<string | null>` - The name of the radio group.

#### async getRadioButtons(filter?: ButtonFilters): Promise<Button[]>

**Description:** Gets a list of radio buttons which are part of the radio-group.

**Parameters:**
- `filter` (ButtonFilters) - Optional: Optionally filters which radio buttons are included.

**Returns:**
- `Promise<Button[]>` - A list of radio buttons.

#### async host(): Promise<TestElement>

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

**Returns:**
- `Promise<TestElement>` - A promise for the TestElement.

#### static with(options?: RadioGroupHarnessFilters): HarnessPredicate<MatRadioGroupHarness>

**Description:** Gets a `HarnessPredicate` that can be used to search for a `MatRadioGroupHarness` that meets certain criteria.

**Parameters:**
- `options` (RadioGroupHarnessFilters) - Optional: Options for filtering which radio group instances are considered a match.

**Returns:**
- `HarnessPredicate<MatRadioGroupHarness>` - A `HarnessPredicate` configured with the given options.

### Properties

#### static hostSelector: '.mat-radio-group'

**Description:** The selector for the host element of a `MatRadioGroup` instance.
```

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

### Loading Component Harnesses with TestbedHarnessEnvironment

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

Demonstrates how to use TestbedHarnessEnvironment to load component harnesses for Angular Material components within a testing fixture. It covers obtaining a standard HarnessLoader, a root HarnessLoader for elements outside the fixture, and a ComponentHarness directly for the fixture's root element.

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

```

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

### Configure Overlay Dimensions (TypeScript)

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

Illustrates how to create an overlay with specific dimensions by passing a configuration object to `overlay.create()`. The configuration includes `height` and `width` properties.

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

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

### Disabled Datepicker Examples

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

Provides examples of disabling the datepicker in various states: completely disabled, popup disabled, and input disabled.

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

/** 
 * @title Disabled datepicker
 */
@Component({
  selector: 'datepicker-disabled-example',
  templateUrl: 'datepicker-disabled-example.html',
  styleUrls: ['datepicker-disabled-example.css']
})
export class DatepickerDisabledExample {}

```

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

### Get and Respond to Directionality Changes in Angular Component

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

This example demonstrates how an Angular component can inject the `Directionality` service to determine the current text direction (LTR or RTL) and subscribe to changes in direction. It utilizes `ngOnDestroy` to properly unsubscribe from direction change events, preventing memory leaks. This is essential for components that need to adapt their layout or behavior based on the user's locale settings.

```typescript
@Component({ ... })
export class MyWidget implements OnDestroy {

  /** Whether the widget is in RTL mode or not. */
  private isRtl: boolean;

  /** Subscription to the Directionality change EventEmitter. */
  private _dirChangeSubscription = Subscription.EMPTY;

  constructor(dir: Directionality) {
    this.isRtl = dir.value === 'rtl';

    this._dirChangeSubscription = dir.change.subscribe(() => {
      this.flipDirection();
    });
  }

  ngOnDestroy() {
    this._dirChangeSubscription.unsubscribe();
  }
}
```

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

### Create Custom Component Harness by Extending ComponentHarness

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

Demonstrates the creation of a custom component harness, 'MyPopupHarness', by extending the abstract 'ComponentHarness' class. It defines the static 'hostSelector' property to identify the component's host element in the DOM.

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

```

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

### Interact with Native Media Queries using MediaMatcher (TypeScript)

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

Explains the use of `MediaMatcher`, a low-level utility that wraps the native `matchMedia` API. It normalizes browser differences and provides a testable interface for interacting with `MediaQueryList` objects.

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

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

### Environment Creation

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

Methods for creating harness environments and loaders.

```APIDOC
## POST /websites/v14_material_angular_dev/createEnvironment

### Description
Creates a `HarnessLoader` rooted at the given raw element.

### Method
POST

### Endpoint
/websites/v14_material_angular_dev/createEnvironment

### Parameters
#### Path Parameters
- **element** (Element) - Required - The raw element to root the loader at.

### Response
#### Success Response (200)
- **HarnessLoader** (HarnessLoader) - The created harness environment.

## POST /websites/v14_material_angular_dev/createTestElement

### Description
Creates a `TestElement` from a raw element.

### Method
POST

### Endpoint
/websites/v14_material_angular_dev/createTestElement

### Parameters
#### Path Parameters
- **element** (Element) - Required - The raw element to create the test element from.

### Response
#### Success Response (200)
- **TestElement** (TestElement) - The created test element.

## POST /websites/v14_material_angular_dev/documentRootLoader

### Description
Creates a `HarnessLoader` at the document root. This can be used if harnesses are located outside of a fixture (e.g. overlays appended to the document body).

### Method
POST

### Endpoint
/websites/v14_material_angular_dev/documentRootLoader

### Parameters
#### Path Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture.
- **options** (TestbedHarnessEnvironmentOptions) - Optional - Options for the testbed harness environment.

### Response
#### Success Response (200)
- **HarnessLoader** (HarnessLoader) - The harness loader at the document root.

## POST /websites/v14_material_angular_dev/harnessForFixture

### Description
Creates an instance of the given harness type, using the fixture's root element as the harness's host element. This method should be used when creating a harness for the root element of a fixture, as components do not have the correct selector when they are created as the root of the fixture.

### Method
POST

### Endpoint
/websites/v14_material_angular_dev/harnessForFixture

### Parameters
#### Path Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture.
- **harnessType** (ComponentHarnessConstructor<T>) - Required - The type of harness to create.
- **options** (TestbedHarnessEnvironmentOptions) - Optional - Options for the testbed harness environment.

### Response
#### Success Response (200)
- **Promise<T>** (Promise<T>) - A promise that resolves with an instance of the harness.

## POST /websites/v14_material_angular_dev/loader

### Description
Creates a `HarnessLoader` rooted at the given fixture's root element.

### Method
POST

### Endpoint
/websites/v14_material_angular_dev/loader

### Parameters
#### Path Parameters
- **fixture** (ComponentFixture<unknown>) - Required - The component fixture.
- **options** (TestbedHarnessEnvironmentEnvironmentOptions) - Optional - Options for the testbed harness environment.

### Response
#### Success Response (200)
- **HarnessLoader** (HarnessLoader) - The created harness loader.

```

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

### Install Angular CDK Schematics

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

Installs only the Angular Component Dev Kit (CDK) and makes its schematics available through the Angular CLI. This is useful if you only need CDK features without the full Angular Material library.

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

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

### Datepicker - Open Method

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

Demonstrates how to programmatically open the datepicker using its 'open' method, useful for triggering date selection via custom actions.

```typescript
import {Component, ViewChild} from '@angular/core';
import {MatDatepicker} from '@angular/material/datepicker';

/** 
 * @title Datepicker open method
 */
@Component({
  selector: 'datepicker-open-method-example',
  templateUrl: 'datepicker-open-method-example.html',
  styleUrls: ['datepicker-open-method-example.css']
})
export class DatepickerOpenMethodExample {
  @ViewChild(MatDatepicker) picker: MatDatepicker<Date>;
}

```

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

### Fixed Sidenav Example (Angular)

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

Demonstrates a fixed sidenav component in Angular Material. This example shows a sidenav that remains in a fixed position, unaffected by scrolling, which is useful for navigation elements that should always be visible. It requires specific CSS to maintain its fixed state.

```html
<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened class="example-sidenav">
    <p>Sidenav content</p>
  </mat-sidenav>

  <div class="example-content">
    <p>Main content goes here</p>
  </div>
</mat-sidenav-container>

```

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

/** @title Fixed sidenav */
@Component({
  selector: 'sidenav-fixed-example',
  templateUrl: 'sidenav-fixed-example.html',
  styleUrls: ['sidenav-fixed-example.css']
})
export class SidenavFixedExample {}

```