### Context Menu Example

Source: https://material.angular.dev/cdk/menu/examples

Demonstrates a basic context menu implementation. No specific setup is required beyond including the MatMenuModule.

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

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

```

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

### Basic Overlay Example

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

Demonstrates the fundamental setup for creating and displaying an overlay. This is useful for creating tooltips, dialogs, or custom popups.

```typescript
import {
  Component,
  ElementRef,
  ViewChild,
  ViewContainerRef,
  inject,
} from "@angular/core";
import {
  Overlay,
  OverlayConfig,
  OverlayRef,
} from "@angular/cdk/overlay";
import {
  CdkOverlayOrigin,
  ConnectedPosition,
} from "@angular/cdk/overlay";
import {
  TemplatePortal,
  PortalModule,
} from "@angular/cdk/portal";

@Component({
  selector: "overlay-basic-example",
  templateUrl: "overlay-basic-example.html",
  styleUrls: ["overlay-basic-example.css"],
  standalone: true,
  imports: [PortalModule, CdkOverlayOrigin],
})
export class OverlayBasicExample {
  @ViewChild("overlayOrigin") overlayOrigin: CdkOverlayOrigin;
  @ViewChild("overlayTemplate") overlayTemplate: TemplatePortal;

  private overlay = inject(Overlay);
  private viewContainerRef = inject(ViewContainerRef);

  private overlayRef: OverlayRef;

  openOverlay() {
    const overlayConfig: OverlayConfig = {
      hasBackdrop: true,
      backdropClass: "cdk-overlay-transparent-backdrop",
      positionStrategy: this.overlay
        .position()
        .flexibleConnectedTo(this.overlayOrigin.elementRef)
        .withPositions([
          {
            originX: "start",
            originY: "bottom",
            overlayX: "start",
            overlayY: "top",
          },
        ]),
    };

    this.overlayRef = this.overlay.create(overlayConfig);
    this.overlayRef.attach(this.overlayTemplate);
  }

  closeOverlay() {
    this.overlayRef.dispose();
  }
}

```

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

### Toolbar Overview Example

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

A basic Material Angular toolbar example, often used as a starting point.

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

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

### Basic Chips Example

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

A simple example of displaying a list of basic chips.

```html
<mat-chip-list aria-label="Fish list">
  <mat-chip *ngFor="let fish of fishs">{{fish}}</mat-chip>
</mat-chip-list>
```

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

### Basic Timepicker Example

Source: https://material.angular.dev/components/timepicker/examples

A simple example demonstrating the basic functionality of the Material Timepicker. This serves as a starting point for using the component.

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

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

```

```html
<mat-form-field>
  <mat-label>Pick a time</mat-label>
  <input matInput [ngxTimepicker]=" 1 ">
  <mat-icon matSuffix>access_time</mat-icon>
</mat-form-field>

```

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

### Badge Overview Examples

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

Demonstrates different ways to apply badges to text, buttons, and icons. Includes examples with different badge sizes and content.

```html
Text with a badge4
```

```html
Text with small badge1
```

```html
Text with large badge1
```

```html
Button with a badge on the left  Action 8
```

```html
Button toggles badge visibility  Hide 7
```

```html
Icon with a badge home15 Example with a home icon with overlaid badge showing the number 15
```

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

### Start Angular Development Server

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

Command to compile the application and start a local development server to view the changes in the browser.

```bash
ng serve
```

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

### Tooltip Harness Example

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

This example is intended for testing purposes and demonstrates how to use `MatTooltipHarness` to interact with tooltips in tests. It requires opening in Stackblitz to run the tests.

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

/**
 * @title Testing with MatTooltipHarness
 */
@Component({
  selector: 'tooltip-harness-example',
  templateUrl: 'tooltip-harness-example.html',
  styleUrls: ['tooltip-harness-example.css'],
})
export class TooltipHarnessExample {}

```

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

### Basic Drawer Example

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

A fundamental implementation of a drawer component, serving as a basic sidenav. This is a starting point for more complex drawer functionalities.

```typescript
import {
  Component,
  HostBinding,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import {
  FormControl
} from '@angular/forms';

/** @title Basic drawer */
@Component({
  selector: 'basic-drawer',
  templateUrl: 'basic-drawer.html',
  styleUrls: ['basic-drawer.css'],
  // Use OnPush change detection for better performance
  changeDetection: ChangeDetectionStrategy.OnPush,
  // Encapsulation is used to limit the CSS to this component
  encapsulation: ViewEncapsulation.None,
})
export class BasicDrawer implements OnInit {
  showFiller = false;

  // Use HostBinding to set the width of the sidenav
  @HostBinding('class.example-width')
  exampleWidth = true;

  // Use FormControl to control the width of the sidenav
  fillerContent = new FormControl(50);

  // Use OnInit to initialize the sidenav
  ngOnInit() {
    // Set the initial width of the sidenav
    this.fillerContent.valueChanges.subscribe(value => {
      this.exampleWidth = true;
    });
  }
}

```

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

### Testing Expansion Panels with Harnesses

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

This example demonstrates how to use `MatExpansionPanelHarness` and `MatAccordionHarness` for testing expansion panel components. It's recommended to open this example in Stackblitz to run the tests.

```typescript
import {ComponentHarness, TestElement} from '@angular/cdk/testing';

/** Harness for interacting with a basic expansion panel in tests. */
export class MatExpansionPanelHarness extends ComponentHarness {
  /** The selector for the host element of `MatExpansionPanel`. */
  static hostSelector = 'mat-expansion-panel';

  /** Clicks the panel header to toggle the expanded state. */
  async click(): Promise<void> {
    const header = await this.locatorForOptional('.mat-expansion-panel-header')();
    if (header) {
      await header.click();
    }
  }

  /** Gets the expanded state of the panel. */
  async isExpanded(): Promise<boolean> {
    const host = await this.host();
    return host.hasClass('mat-expanded');
  }

  /** Gets the text content of the panel body. */
  async getBodyText(): Promise<string> {
    const body = await this.locatorForOptional('.mat-expansion-panel-content')();
    return body ? (await body.text()) : '';
  }
}

/** Harness for interacting with a `MatAccordion` in tests. */
export class MatAccordionHarness extends ComponentHarness {
  /** The selector for the host element of `MatAccordion`. */
  static hostSelector = '.mat-accordion';

  /** Gets all the expansion panels in the accordion. */
  async getExpansionPanels(): Promise<MatExpansionPanelHarness[]> {
    return this.locatorForAll(MatExpansionPanelHarness)();
  }

  /** Gets all the expansion panels that are currently expanded. */
  async getExpandedExpansionPanels(): Promise<MatExpansionPanelHarness[]> {
    return this.locatorForAll(MatExpansionPanelHarness.with({expanded: true}))();
  }

  /** Gets the expansion panel that matches the given configuration. */
  async getExpansionPanel(options: {expanded?: boolean; disabled?: boolean}): Promise<MatExpansionPanelHarness | null> {
    return this.locatorForOptional(MatExpansionPanelHarness.with(options))();
  }

  /** Gets the expansion panels that match the given configuration. */
  async getExpansionPanels(options: {expanded?: boolean; disabled?: boolean}): Promise<MatExpansionPanelHarness[]> {
    return this.locatorForAll(MatExpansionPanelHarness.with(options))();
  }
}
```

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

### Basic Sidenav Example

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

A simple, foundational sidenav implementation. This serves as a starting point for understanding the core structure and usage of the sidenav component.

```typescript
import {
  Component,
  HostBinding,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import {
  FormControl
} from '@angular/forms';

/** @title Basic sidenav */
@Component({
  selector: 'basic-sidenav',
  templateUrl: 'basic-sidenav.html',
  styleUrls: ['basic-sidenav.css'],
  // Use OnPush change detection for better performance
  changeDetection: ChangeDetectionStrategy.OnPush,
  // Encapsulation is used to limit the CSS to this component
  encapsulation: ViewEncapsulation.None,
})
export class BasicSidenav implements OnInit {
  showFiller = false;

  // Use HostBinding to set the width of the sidenav
  @HostBinding('class.example-width')
  exampleWidth = true;

  // Use FormControl to control the width of the sidenav
  fillerContent = new FormControl(50);

  // Use OnInit to initialize the sidenav
  ngOnInit() {
    // Set the initial width of the sidenav
    this.fillerContent.valueChanges.subscribe(value => {
      this.exampleWidth = true;
    });
  }
}

```

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

### Basic Tooltip Example

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

A fundamental example of a basic tooltip. This demonstrates the simplest way to add tooltip functionality to an element.

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

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

```

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

### Form Field with Input, Select, and Textarea

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

Demonstrates a basic form field setup including native input, select, and textarea elements. This serves as a foundational example for using `<mat-form-field>`.

```html
<mat-form-field>
  <input matNativeControl placeholder="Input">
</mat-form-field>

<mat-form-field>
  <select matNativeControl>
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</mat-form-field>

<mat-form-field>
  <textarea matNativeControl placeholder="Textarea"></textarea>
</mat-form-field>
```

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

### Basic Checkboxes Example

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

A simple example demonstrating the basic usage of checkboxes. This is suitable for straightforward selections where no complex configuration is needed.

```html
<mat-checkbox>Check me!</mat-checkbox>
<mat-checkbox labelPosition="before">Check me!</mat-checkbox>
<mat-checkbox disabled>Disabled</mat-checkbox>
<mat-checkbox [checked]=true>Checked</mat-checkbox>

<p>Parent task</p>
<ul>
  <li><mat-checkbox>Child task 1</mat-checkbox></li>
  <li><mat-checkbox>Child task 2</mat-checkbox></li>
  <li><mat-checkbox [checked]=true>Child task 3</mat-checkbox></li>
</ul>
```

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

### Chips in Reactive Forms Example

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

Demonstrates how to integrate chips within a reactive form, allowing dynamic addition and removal of keywords. This example includes 'angular', 'how-to', 'tutorial', and 'accessibility' keywords.

```html
<mat-form-field class="example-chip-field" appearance="fill">
  <mat-label>Video keywords</mat-label>
  <mat-chip-grid #chipGrid aria-label="Video keywords">
    <mat-chip-row *ngFor="let keyword of keywords" (removed)="removeKeyword(keyword)">
      {{keyword.tag}}
      <button matChipRemove [attr.aria-label]="'remove ' + keyword.tag">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
  </mat-chip>
  <input placeholder="New keyword..." #keywordInput
         [matChipInputFor]="chipGrid"
         [matChipInputAddOnBlur]="addOnBlur"
         (matChipInputTokenEnd)="addKeyword($event)">
</mat-form-field>
```

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

### Stacked Chips Example

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

Illustrates how to stack multiple chips.

```html
<mat-chip-grid>
  <mat-chip>Chip 1</mat-chip>
  <mat-chip>Chip 2</mat-chip>
  <mat-chip>Chip 3</mat-chip>
</mat-chip-grid>
```

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

### Basic List Example

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

A simple list displaying basic content. This serves as a foundational example for using the Angular Material list.

```html
<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
```

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

### Accordion Overview Example

Source: https://material.angular.dev/cdk/accordion

Demonstrates the basic structure and interaction of an accordion component using CDK Accordion. This example shows multiple expandable items.

```html
<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Item 1
      </mat-panel-title>
      <mat-panel-description>
        Click to open
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the expand content for item 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Item 2
      </mat-panel-title>
      <mat-panel-description>
        Click to open
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the expand content for item 2.</p>
  </mat-expansion-panel>

  <mat-expansion-panel [disabled]="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Item 3
      </mat-panel-title>
      <mat-panel-description>
        Disabled
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the expand content for item 3.</p>
  </mat-expansion-panel>
</mat-accordion>
```

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

### List with Selection Example

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

An example demonstrating a Material Angular list with selection enabled. This allows users to select items from the list.

```html
<mat-selection-list>
  <mat-list-option value="1">Item 1</mat-list-option>
  <mat-list-option value="2">Item 2</mat-list-option>
  <mat-list-option value="3">Item 3</mat-list-option>
</mat-selection-list>
```

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

### Basic CDK Data-Table Example

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

A complete example of a CDK data-table with three columns: 'username', 'age', and 'title'. It includes column definitions and row declarations, binding to a `dataSource`.

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

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

### Example: Table with Three Columns

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

A complete example of a CDK data-table with three columns: username, age, and title. It includes column definitions and 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>
```

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

### Simple Autocomplete

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

A straightforward autocomplete example.

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

/**
 * @title Simple autocomplete
 */
@Component({
  selector: 'autocomplete-simple-example',
  templateUrl: 'autocomplete-simple-example.html',
  styleUrls: ['autocomplete-simple-example.css'],
})
export class AutocompleteSimpleExample {
  myControl = new FormControl('');
  options: string[] = ['Angular', 'Babel', 'Ember', 'Jasmine', 'Karma', 'Micronaut', 'React', 'Vue'];
  filteredOptions: Observable<string[]>;

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

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

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

### Autocomplete Overview

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

A basic example of an autocomplete input.

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

/**
 * @title Basic autocomplete
 */
@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
  styleUrls: ['autocomplete-overview-example.css'],
})
export class AutocompleteOverviewExample {
  stateCtrl = new FormControl('');
  states: string[] = [
    'Arkansas',
    'California',
    'Illinois',
    'New York',
    'North Carolina',
    'Rhode Island',
    'Washington',
  ];
  filteredStates: Observable<string[]>;

  constructor() {
    this.filteredStates = this.stateCtrl.valueChanges.pipe(
      startWith(''),
      map(state => (state ? this._filterStates(state) : this.states)))
    ;
  }

  private _filterStates(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.states.filter(state => state.toLowerCase().includes(filterValue));
  }
}
```

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

### Overlay Setup and Creation

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

This snippet shows how to import the necessary overlay styles and create a basic overlay instance.

```APIDOC
## Overview for overlay

The `overlay` package provides a way to open floating panels on the screen.

### Initial setup

The CDK overlays depend on a set of structural styles to work correctly. If you're using Angular Material, these styles have been included with the theme. Otherwise, if you're using the CDK on its own, you'll need to include the styles yourself by importing the prebuilt styles in your global stylesheet:

```typescript
@import '@angular/cdk/overlay-prebuilt.css';
```

### Creating overlays

Calling `overlay.create()` returns an `OverlayRef` instance, which is a handle for managing that specific overlay. The `OverlayRef` is a `PortalOutlet`; once created, content can be added by attaching a `Portal`. See the documentation on portals for further information.

```typescript
import {ComponentPortal} from '@angular/cdk/portal';
import {Overlay} from '@angular/cdk/overlay';

// Assuming 'overlay' is an instance of Overlay
const overlayRef = overlay.create();
const userProfilePortal = new ComponentPortal(UserProfile);
overlayRef.attach(userProfilePortal);
```
```

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

### Action List Example

Source: https://material.angular.dev/components/list/examples

Demonstrates a basic action list with clickable items. Use for simple lists where each item performs an action.

```html
<button mat-list-item>
  <mat-icon matListItemIcon>save</mat-icon>
  Save
</button>
<button mat-list-item>
  <mat-icon matListItemIcon>undo</mat-icon>
  Undo
</button>
```

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

### getStartInput

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

Gets the inner start date input element within the range input component. This allows for direct interaction with the start date input field.

```APIDOC
## getStartInput

### Description
Gets the inner start date input inside the range input.

### Method
`getStartInput(): Promise<MatStartDateHarness>`
```

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

### getSeparator

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

Gets the separator text that appears between the start and end date inputs. This is useful for verifying the visual formatting of the range input.

```APIDOC
## getSeparator

### Description
Gets the separator text between the values of the two inputs.

### Method
`getSeparator(): Promise<string>`
```

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

### Configurable Paginator Example

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

Demonstrates a configurable paginator with options for page size, page index, and visibility of navigation buttons. Includes event output.

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

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

  length = 50;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  // MatPaginator inputs
  pageEvent: PageEvent;

  ngOnInit() {
    // Initialize with default values if needed
  }

  // Handle page event
  handlePage(e: PageEvent) {
    this.pageEvent = e;
  }
}

```

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

### Responsive Sidenav Example

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

Shows how to implement a responsive sidenav that adapts its behavior and appearance based on screen size. This ensures optimal user experience across devices.

```typescript
import {
  Component,
  HostBinding,
  OnInit,
  ViewEncapsulation,
} from '@angular/core';
import {
  FormControl
} from '@angular/forms';

/** @title Responsive sidenav */
@Component({
  selector: 'responsive-sidenav',
  templateUrl: 'responsive-sidenav.html',
  styleUrls: ['responsive-sidenav.css'],
  // Use OnPush change detection for better performance
  changeDetection: ChangeDetectionStrategy.OnPush,
  // Encapsulation is used to limit the CSS to this component
  encapsulation: ViewEncapsulation.None,
})
export class ResponsiveSidenav implements OnInit {
  showFiller = false;

  // Use HostBinding to set the width of the sidenav
  @HostBinding('class.example-width')
  exampleWidth = true;

  // Use FormControl to control the width of the sidenav
  fillerContent = new FormControl(50);

  // Use OnInit to initialize the sidenav
  ngOnInit() {
    // Set the initial width of the sidenav
    this.fillerContent.valueChanges.subscribe(value => {
      this.exampleWidth = true;
    });
  }
}

```

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

### Chips with Input Example

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

Shows how to implement chips that allow user input.

```html
<mat-chip-grid aria-label="New tags">
  <input placeholder="New tag...">
</mat-chip-grid>
```

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

### getEndInput

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

Gets the inner start date input element within the range input component. This allows for direct interaction with the end date input field.

```APIDOC
## getEndInput

### Description
Gets the inner start date input inside the range input.

### Method
`getEndInput(): Promise<MatEndDateHarness>`
```

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

### Basic Date Range Picker

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

A fundamental example of a date range picker for selecting a start and end date. Suitable for general date selection needs.

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

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

```

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

### Creating a Light Theme

Source: https://material.angular.dev/guide/material-2-theming

Demonstrates how to construct a light theme using defined color palettes, typography, and density.

```APIDOC
## Creating a Light Theme

### Description
Constructs a light theme configuration for Angular Material components.

### Method
Sass function calls

### Endpoint
N/A (Sass configuration)

### Parameters
N/A

### Request Example
```sass
@use '@angular/material' as mat;

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

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

$my-theme: mat.m2-define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: mat.m2-define-typography-config(),
  density: 0,
));
```

### Response
N/A (Sass variable `$my-theme` is defined)

### Response Example
N/A
```

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

### Date Range Input Setup

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

Sets up the necessary input elements for selecting a date range. Requires two input fields for start and end dates.

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

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

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

### Enable Strong Focus Indicators

Source: https://material.angular.dev/guide/typography

Call `mat.strong-focus-indicators()` to enable highly visible outlines on focused elements, improving accessibility. This example includes it alongside a base theme setup.

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

html {
  color-scheme: light dark;
  @include mat.theme((color: mat.$violet-palette, typography: Roboto, density: 0));
  @include mat.strong-focus-indicators();
}
```

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

### Slider with Custom Thumb Label Formatting - Material Angular

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

Shows how to customize the thumb label formatting for a Material Angular slider. This example requires specific component setup.

```html
<mat-slider thumbLabel="true" tickInterval="auto" step="0.1" min="-1" max="1" value="0"></mat-slider>
```

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

### Get Expansion Panel HarnessPredicate

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

Gets a HarnessPredicate that can be used to search for an expansion-panel with specific attributes.

```APIDOC
## static with (options: ExpansionPanelHarnessFilters = {})

### Description
Gets a `HarnessPredicate` that can be used to search for an expansion-panel with specific attributes.

### Parameters
#### Options
- **options** (ExpansionPanelHarnessFilters) - Optional - Options for narrowing the search:
  * `title` (string) - finds an expansion-panel with a specific title text.
  * `description` (string) - finds an expansion-panel with a specific description text.
  * `expanded` (boolean) - finds an expansion-panel that is currently expanded.
  * `disabled` (boolean) - finds an expansion-panel that is disabled.

### Returns
`HarnessPredicate<MatExpansionPanelHarness>` | A `HarnessPredicate` configured with the given options.
```

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

### Creating a HarnessLoader in Testbed

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

This snippet demonstrates how to set up a `HarnessLoader` within a Testbed environment for unit testing. It configures the testing module, creates a component fixture, and initializes the loader.

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

let loader: HarnessLoader;

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

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

### List with Icons Example

Source: https://material.angular.dev/components/list/examples

Demonstrates a list where each item is accompanied by an icon. Useful for visually categorizing list items.

```html
<mat-list>
  <mat-list-item>
    <mat-icon matListItemIcon>folder</mat-icon>
    Inbox
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>inbox</mat-icon>
    Messages
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>folder</mat-icon>
    Outbox
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>outbox</mat-icon>
    Sent
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>folder</mat-icon>
    Drafts
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>drafts</mat-icon>
    New Draft
  </mat-list-item>
</mat-list>
```

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

### Basic List Example

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

A basic example of a Material Angular list. This is suitable for purely decorative purposes.

```html
<mat-list>
  <mat-list-item>Item 1</mat-list-item>
  <mat-list-item>Item 2</mat-list-item>
  <mat-list-item>Item 3</mat-list-item>
</mat-list>
```

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

### Vertical Stepper Example

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

Demonstrates a basic vertical stepper with navigation buttons.

```html
<mat-stepper orientation="vertical" labelPosition="bottom" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" optional>
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button matButton matStepperPrevious>Back</button>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button matButton matStepperPrevious>Back</button>
      <button matButton (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>
```

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

### Basic Paginator Example

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

A simple example of the Material Angular Paginator component displaying basic pagination controls.

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

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

```

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

### Chips with Input Example

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

Shows a basic implementation of chips that can be added and removed, with an input field for adding new chips. Includes edit and cancel actions.

```html
<mat-chip-list aria-label="Enter fruit nicknames">
  <mat-chip *ngFor="let chip of chips" (removed)="remove(chip)">
    {{chip.name}}
    <button matChipRemove [attr.aria-label]="'remove ' + chip.name"><mat-icon>cancel</mat-icon></button>
  </mat-chip>
</mat-chip-list>
<input placeholder="New fruit...">

```

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

### Stacked Chips Example

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

Shows how to display multiple chips in a stacked layout, representing different dog breeds.

```html
<mat-chip-list aria-label="Stacked dog list">
  <mat-chip *ngFor="let dog of dogs">{{dog}}</mat-chip>
</mat-chip-list>
```

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

### Basic mat-select Example

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

Demonstrates a simple `<mat-select>` component within a `<mat-form-field>` to display a list of options. Ensure `<mat-form-field>` and `<mat-select>` are imported.

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

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

### Basic Tab Group Example

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

A fundamental example of a tab group with basic content. This demonstrates the core functionality of the `mat-tab-group` component.

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

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

### Horizontal Stepper Example

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

Demonstrates a basic horizontal stepper with navigation buttons.

```html
<mat-stepper orientation="horizontal" labelPosition="bottom" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" optional>
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button matButton matStepperPrevious>Back</button>
        <button matButton matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button matButton matStepperPrevious>Back</button>
      <button matButton (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>
```

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

### Interact with Media Queries using MediaMatcher

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

This example shows how to use `MediaMatcher` to interact with the browser's native `matchMedia` API. `MediaMatcher` normalizes browser differences and provides a testable interface for media query evaluation, returning a `MediaQueryList`.

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

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

### Basic Chips Example

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

Demonstrates the basic implementation of Material Angular Chips.

```html
<mat-chip-listbox aria-label="My chips">
  <mat-chip-option>Option 1</mat-chip-option>
  <mat-chip-option>Option 2</mat-chip-option>
  <mat-chip-option>Option 3</mat-chip-option>
</mat-chip-listbox>
```

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

### Portal Overview

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

Explains the core concepts of Portals and PortalOutlets for rendering dynamic UI.

```APIDOC
## Overview for portal
The `portals` package provides a flexible system for rendering dynamic content into an application.

A `Portal` is a piece of UI that can be dynamically rendered to an open slot on the page. The "piece of UI" can be either a `Component`, a `TemplateRef` or a DOM element and the "open slot" is a `PortalOutlet`. Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are built upon.
```

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

### Datepicker Start Date

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

Demonstrates setting a custom start date for the datepicker's calendar view. Useful for controlling the initial display.

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

```

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

### TreeKeyManager Basic Usage

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

Demonstrates the basic setup for TreeKeyManager, including querying tree items and forwarding keyboard events.

```typescript
// Create a @ViewChildren query for the tree items being managed.
// Initialize the TreeKeyManager, passing in the options.
// Forward keyboard events from the managed component to the TreeKeyManager via onKeydown.
```

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

### Paginator Internationalization Example

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

Demonstrates how to internationalize the Material Angular Paginator by providing custom labels for different languages. This example shows French labels.

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

/**
 * @title Paginator internationalization
 */
@Component({
  selector: 'paginator-internationalization-example',
  templateUrl: 'paginator-internationalization-example.html',
  styleUrls: ['paginator-internationalization-example.css']
})
export class PaginatorInternationalizationExample {
  constructor(private paginatorIntl: MatPaginatorIntl) {
    // Example of setting custom labels for French
    this.paginatorIntl.itemsPerPageLabel = 'Éléments par page';
    this.paginatorIntl.nextPageLabel = 'Page suivante';
    this.paginatorIntl.previousPageLabel = 'Page précédente';
    this.paginatorIntl.firstPageLabel = 'Première page';
    this.paginatorIntl.lastPageLabel = 'Dernière page';
  }
}

```

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

### Overlay Configuration

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

Demonstrates how to configure an overlay with specific dimensions and explore positioning strategies.

```APIDOC
### Configuring an overlay

When creating an overlay, an optional configuration object can be provided to set properties like height and width.

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

The full set of configuration options can be found in the API documentation.

#### Position strategies

The `positionStrategy` configuration option determines how the overlay will be positioned on-screen. Two primary strategies are available: `GlobalPositionStrategy` and `ConnectedPositionStrategy`.

- `GlobalPositionStrategy`: Used for overlays requiring a specific viewport position, independent of other elements (e.g., modals, notifications).
- `ConnectedPositionStrategy`: Used for overlays positioned relative to an "origin" element (e.g., menus, pickers, tooltips). It selects the best position based on viewport fit from a set of preferred positions.

`FlexibleConnectedPositionStrategy` offers advanced features over `ConnectedPositionStrategy`, including scrollability, margins, viewport pushing, and transform origin configuration for animations.

A custom position strategy can be created by implementing the `PositionStrategy` interface, which requires an `apply` method.

#### Scroll strategies

The `scrollStrategy` configuration option determines how the overlay reacts to scrolling outside the overlay element. Four strategies are available:

- `NoopScrollStrategy`: The default; does nothing.
- `CloseScrollStrategy`: Automatically closes the overlay on scroll.
- `BlockScrollStrategy`: Prevents page scrolling while the overlay is open. Can be overridden for custom scrolling behavior.
- `RepositionScrollStrategy`: Re-positions the overlay on scroll, with potential performance implications.

A custom scroll strategy can be created by implementing the `ScrollStrategy` interface, often injecting `ScrollDispatcher` to listen for scroll events.
```

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

### Create an Overlay Instance

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

Instantiate an overlay using the `overlay.create()` method. The returned `OverlayRef` serves as a handle to manage the overlay and attach content via a `Portal`.

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

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

### Get HarnessLoader for Content (Deprecated)

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

Gets a HarnessLoader that can be used to load harnesses for components within the panel's content area. This method is deprecated.

```APIDOC
## async getHarnessLoaderForContent ()

### Description
Gets a `HarnessLoader` that can be used to load harnesses for components within the panel's content area.

### Returns
`Promise<HarnessLoader>` | 

### Deprecated
This method is deprecated.
```

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

### Chips with Form Control Example

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

Demonstrates chips integrated with form controls, allowing users to enter and manage keywords. Includes options to disable and enable the form control.

```html
<mat-form-field class="example-chip-field" appearance="fill">
  <mat-label>Video keywords</mat-label>
  <mat-chip-grid #chipGrid aria-label="Video keywords">
    <mat-chip-row *ngFor="let keyword of keywords" (removed)="removeKeyword(keyword)">
      {{keyword.tag}}
      <button matChipRemove [attr.aria-label]="'remove ' + keyword.tag">
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip-row>
  </mat-chip>
  <input placeholder="New keyword..." #keywordInput
         [matChipInputFor]="chipGrid"
         [matChipInputAddOnBlur]="addOnBlur"
         (matChipInputTokenEnd)="addKeyword($event)">
</mat-form-field>

<p>
  <mat-checkbox (change)="addOnBlur = !addOnBlur" [checked]="addOnBlur">
    Add on blur
  </mat-checkbox>
</p>
```

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

### Timepicker Validation Example

Source: https://material.angular.dev/components/timepicker/examples

Illustrates how to implement validation for the timepicker, showing error messages when input does not meet specified criteria. This example enforces a time range.

```typescript
import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

/**
 * @title Timepicker validation
 */
@Component({
  selector: 'timepicker-validation-example',
  templateUrl: 'timepicker-validation-example.html',
  styleUrls: ['timepicker-validation-example.css'],
})
export class TimepickerValidationExample {
  timeForm = new FormGroup({
    time: new FormControl('', [
      Validators.required,
      Validators.pattern('^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$'),
      this.timeValidator,
    ]),
  });

  get time() {
    return this.timeForm.get('time');
  }

  timeValidator(control: FormControl) {
    const time = control.value;
    if (!time) {
      return null;
    }
    const [hours, minutes] = time.split(':').map(Number);
    const totalMinutes = hours * 60 + minutes;

    if (totalMinutes < 750 || totalMinutes > 1050) {
      return {timeValidator: true};
    }

    return null;
  }
}

```

```html
<form [formGroup]="timeForm">
  <mat-form-field>
    <mat-label>Pick a time</mat-label>
    <input matInput [ngxTimepicker]=" 1 " formControlName="time">
    <mat-icon matSuffix>access_time</mat-icon>

    <mat-error *ngIf="time?.hasError('required')">Time is required</mat-error>
    <mat-error *ngIf="time?.hasError('pattern')">Please enter a valid time</mat-error>
    <mat-error *ngIf="time?.hasError('timeValidator')">Enter a value before 12:30 PM or after 5:30 PM</mat-error>
  </mat-form-field>
</form>

<p>Errors: {{ timeForm.controls.time.errors | json }}</p>

```