Angular Material

https://material.angular.dev/guide
Admin
Angular Material is a UI component library for Angular that provides a set of reusable, well-tested,...
Tokens:24,739
Snippets:318
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Apply Legacy Component Theming

Source: https://material.angular.dev/guide/theming-your-components

Example of applying theme styles using Sass mixins and maps.

```scss
@use '@angular/material' as mat;
@use 'sass:map';

@mixin my-component-theme($theme) {
  $foreground: map.get(mat.m2-get-color-config($theme), foreground);
  $background: map.get(mat.m2-get-color-config($theme), background);
  $primary: map.get(mat.m2-get-color-config($theme), primary);
  $typography: mat.m2-get-typography-config($config-or-theme);

  .widget-a {
    background-color: mat.m2-get-color-from-palette($background, card);
    color: mat.m2-get-color-from-palette($foreground, text);
    @include mat.m2-typography-level($config, body-1);  
  }

  .widget-b {
    background-color: mat.m2-get-color-from-palette($primary, default);
    color: mat.m2-get-color-from-palette($primary, default-contrast);
  }
}
```

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

### Configure Material Design 2 Theme

Source: https://material.angular.dev/guide/theming-your-components

Setup for M2 theme configuration including system classes.

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

$theme: mat.m2-define-light-theme((
  color: (
    primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500),
  ),
  ...
));

html {
  @include mat.core-theme($theme);
  @include mat.button-theme($theme);
  ...
  @include mat.m2-theme($theme);
  @include mat.system-classes();
}
```

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

### Linear Mode Stepper Example

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

Implements a custom stepper in linear mode, where users must complete previous steps before proceeding. This example does not use forms and includes manual completion logic.

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

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

### Run Local Development Server

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

Start the Angular development server to view your application locally. Access the application in your browser at http://localhost:4200.

```bash
ng serve
```

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

### Install Angular Material

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

Use the Angular CLI to add Angular Material to your project. This command installs necessary dependencies and configures global styles and fonts.

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

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

### Install Angular CDK Schematics

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

If you only need to install the Angular Component Dev Kit (CDK), use this command which includes its schematics.

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

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

### Include Strong Focus Indicators

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

Include the `strong-focus-indicators` mixin once per application to emit structural indicator styles. This example also includes component themes.

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

@include mat.strong-focus-indicators();

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

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

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

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

### Test with Component Harnesses

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

This example shows the same test using Angular Material component harnesses. It utilizes `MatSelectHarness` for a more declarative and robust way to interact with the select component, abstracting DOM details and asynchronous behavior.

```typescript
describe('issue-report-selector', () => {
  let fixture: ComponentFixture<IssueReportSelector>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [IssueReportSelectorModule],
      declarations: [IssueReportSelector],
    });

    fixture = TestBed.createComponent(IssueReportSelector);
    fixture.detectChanges();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const select = await loader.getHarness(MatSelectHarness);
    await select.open();
    const bugOption = await select.getOption({text: 'Bug'});
    await bugOption.click();
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });
});
```

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

### Test without Component Harnesses

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

This example demonstrates a test for an issue report selector component without using component harnesses. It directly queries the DOM using CSS selectors and Angular's `By.css`, requiring manual handling of asynchronous operations.

```typescript
describe('issue-report-selector', () => {
  let fixture: ComponentFixture<IssueReportSelector>;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [IssueReportSelectorModule],
      declarations: [IssueReportSelector],
    });

    fixture = TestBed.createComponent(IssueReportSelector);
    fixture.detectChanges();
  });

  it('should switch to bug report template', async () => {
    expect(fixture.debugElement.query('bug-report-form')).toBeNull();
    const selectTrigger = fixture.debugElement.query(By.css('.mat-select-trigger'));
    selectTrigger.triggerEventHandler('click', {});
    fixture.detectChanges();
    await fixture.whenStable();
    const options = document.querySelectorAll('.mat-select-panel mat-option');
    options[1].click(); // Click the second option, "Bug".
    fixture.detectChanges();
    await fixture.whenStable();
    expect(fixture.debugElement.query('bug-report-form')).not.toBeNull();
  });
});
```

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

### Use Custom Control in Material Form Field

Source: https://material.angular.dev/guide/creating-a-custom-form-field-control

This example shows how to integrate a custom form field control, `example-tel-input`, within the Angular Material `<mat-form-field>` component.

```html
<mat-form-field>
  <example-tel-input></example-tel-input>
</mat-form-field>
```

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

### Iterating Over Custom Steps

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

Demonstrates how to dynamically generate steps for the custom stepper by iterating over a data source and using a custom step component.

```html
<app-custom-stepper>
  @for (step of mySteps; track step) {
    <cdk-step>
      <my-step-component [step]="$index"></my-step-component>
    </cdk-step>
  }
</app-custom-stepper>
```

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

### Setting up HarnessLoader for Unit Tests

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

Import `TestbedHarnessEnvironment` and `HarnessLoader` to create a `HarnessLoader` instance for a component fixture in unit tests. This loader is used to find and interact with Angular Material components.

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

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

### Apply Theme Styles with Utility Classes

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

Use pre-defined utility classes to apply theme colors, borders, and typography to HTML elements.

```html
<div class="mat-bg-primary-container mat-text-on-primary-container mat-border-variant mat-font-body-lg"></div>
```

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

### Load Harnesses from Child Loader

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

Use `getChildLoader` to get a `HarnessLoader` for a specific sub-section of the DOM, identified by a CSS selector. This allows for more targeted harness loading.

```typescript
it('should work', async () => {
  const footerLoader = await loader.getChildLoader('.footer');
  const footerButton = await footerLoader.getHarness(MatButtonHarness);
});
```

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

### Generate a custom color palette

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

Run the theme-color schematic to create custom palettes based on input colors.

```bash
ng generate @angular/material:theme-color
```

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

### Handle Container Click in Custom Form Field

Source: https://material.angular.dev/guide/creating-a-custom-form-field-control

Implement the `onContainerClick` method to define behavior when the user clicks on the form field. This example focuses the input element within the custom control.

```typescript
onContainerClick(event: MouseEvent) {
  if ((event.target as Element).tagName.toLowerCase() != 'input') {
    this._elementRef.nativeElement.querySelector('input').focus();
  }
}
```

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

### Generate Navigation Component

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

Creates a new component featuring a responsive sidenav and a toolbar, suitable for application navigation.

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

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

### Scope Component Styles with Sass Mixins

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

Customize component styles within a specific scope by including Sass mixins within a CSS rule declaration. This example customizes button colors for elements with the `.my-special-section` class.

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

.my-special-section {
 $special-primary: mat.m2-define-palette(mat.$m2-orange-palette);
 $special-accent: mat.m2-define-palette(mat.$m2-brown-palette);
 $special-theme: mat.m2-define-dark-theme((
   color: (primary: $special-primary, accent: $special-accent),
 ));

 @include mat.button-color($special-theme);
}

```

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

### Include all theme dimensions for a component

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

Use the component's theme mixin to include all theme dimensions (base, color, typography, density) at once. This is the recommended approach for laying down base styles.

```scss
@include mat.checkbox-theme($theme)
```

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

### Include a prebuilt theme in angular.json

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

Add the path to a prebuilt theme CSS file within the styles array of your project's angular.json configuration.

```json
"styles": [
  "@angular/material/prebuilt-themes/azure-blue.css"
]
```

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

### Check Theme Configuration Dimensions

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

Use `theme-has` to verify if a theme includes configuration for specific dimensions like base, color, typography, or density.

```scss
$theme: mat.m2-define-dark-theme(...);

$has-base: mat.theme-has($theme, base);
$has-color: mat.theme-has($theme, color);
$has-typography: mat.theme-has($theme, typography);
$has-density: mat.theme-has($theme, density);
```

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

### Apply Component Styles with Utility Classes

Source: https://material.angular.dev/guide/theming-your-components

Using utility classes directly in the template for component styling.

```html
<widget-a class="mat-bg-surface mat-text-on-surface mat-font-body-medium"/>

<widget-b class="mat-bg-primary mat-text-on-primary"/>
```

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

### Define a Light Theme with Color Palettes

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

Constructs a light theme using defined color palettes, typography configuration, and density. The theme is defined using `m2-define-light-theme`.

```scss
@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,
));
```

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

### Define Outline System Tokens

Source: https://material.angular.dev/guide/theming-your-components

CSS custom properties for standard and variant outline colors.

```css
--mat-sys-outline
--mat-sys-outline-variant
```

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

### Include theme system utility classes

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

Enables the use of theme-based utility classes in component templates.

```scss
html {
  ...
  @include mat.system-classes();
}
```

```html
<body class="mat-bg-surface mat-text-on-surface">
```

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

### Apply default theme background and text colors

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

Sets the body background and text color using theme-provided CSS variables.

```css
body {
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}
```

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

### Generate Dashboard Component

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

Creates a component with a dynamic grid list of Material Design cards, useful for dashboard layouts.

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

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

### Apply typography styles in HTML

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

Demonstrates how to apply Material Design typography styles using emitted CSS classes, both inside and outside the `.mat-typography` container.

```html
<body>
  <!-- This header will *not* be styled because it is outside `.mat-typography` -->
  <h1>Top header</h1>

  <!-- This paragraph will be styled as `body-1` via the `.mat-body` CSS class applied -->
  <p class="mat-body">Introductory text</p>

  <div class="mat-typography">
    <!-- This header will be styled as `title` because it is inside `.mat-typography` -->
    <h2>Inner header</h2>

    <!-- This paragraph will be styled as `body-1` because it is inside `.mat-typography` -->
    <p>Some inner text</p>
  </div>
</body>
```

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

### Load Button Harnesses

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

Use `getHarness` or `getAllHarnesses` to load component harnesses. `getAllHarnesses` retrieves all instances, while `getHarness` retrieves the first instance. All harness APIs are asynchronous and return Promises.

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

... 

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

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

### Generate Material 3 Theme Color File

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

Generates a file with Material 3 palettes and optional high contrast color override mixins for theme customization.

```bash
ng generate @angular/material:theme-color
```

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

### Apply small label typography

Source: https://material.angular.dev/guide/theming-your-components

Use for text in a badge.

```css
.mat-font-label-sm {
  font: var(--mat-sys-label-small);
  letter-spacing: var(--mat-sys-label-small-tracking);
}
```

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

### Apply Component Styles with CSS Variables

Source: https://material.angular.dev/guide/theming-your-components

Modern approach to component theming using CSS variables instead of Sass mixins.

```css
.widget-a  {
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);    
  font: var(--mat-sys-body-medium);
}

.widget-b {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
}
```

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

### Load Harnesses with Predicates

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

Use the static `with` method on component harnesses to create a `HarnessPredicate`. This predicate filters harnesses based on constraints like `selector`, `ancestor`, or harness-specific options like `text` for buttons.

```typescript
it('should work', async () => {
  // Harness for mat-button whose id is 'more-info'.
  const info = await loader.getHarness(MatButtonHarness.with({selector: '#more-info'}));
  // Harness for mat-button whose text is 'Cancel'.
  const cancel = await loader.getHarness(MatButtonHarness.with({text: 'Cancel'}));
  // Harness for mat-button with class 'confirm' and whose text is either 'Ok' or 'Okay'.
  const okButton = await loader.getHarness(
      MatButtonHarness.with({selector: '.confirm', text: /^(Ok|Okay)$/}));
});
```

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

### Apply small headline typography

Source: https://material.angular.dev/guide/theming-your-components

Use for page titles or dialog headlines.

```css
.mat-font-headline-sm {
  font: var(--mat-sys-headline-small);
  letter-spacing: var(--mat-sys-headline-small-tracking);
}
```

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

### Using the Custom Stepper Component

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

Integrates the custom stepper component into the application's template, defining steps using the `<cdk-step>` tag.

```html
<app-custom-stepper>
  <cdk-step><p>This is any content of "Step 1"</p></cdk-step>
  <cdk-step><p>This is any content of "Step 2"</p></cdk-step>
</app-custom-stepper>
```

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

### Apply medium display typography

Source: https://material.angular.dev/guide/theming-your-components

Use for short, impactful text in hero sections or titles.

```css
.mat-font-display-md {
  font: var(--mat-sys-display-medium);
  letter-spacing: var(--mat-sys-display-medium-tracking);
}
```

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

### Include Roboto Font from Google Fonts

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

Add these HTML tags to your application's `<head>` to load the Roboto font and its specified weights from Google Fonts.

```html
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
```

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

### Customize Strong Focus Indicators

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

Customize strong focus indicator styles by passing a configuration map to `strong-focus-indicators` and setting a custom color for `strong-focus-indicators-theme`.

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

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

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

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

@include mat.all-component-themes($my-theme);
@include mat.strong-focus-indicators-theme(purple);
```

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

### Apply Corner Radius Classes

Source: https://material.angular.dev/guide/theming-your-components

CSS classes for applying specific corner radius tokens to components.

```css
.mat-corner-xs {
  border-radius: var(--mat-sys-corner-extra-small);
}
```

```css
.mat-corner-sm {
  border-radius: var(--mat-sys-corner-small);
}
```

```css
.mat-corner-md {
  border-radius: var(--mat-sys-corner-medium);
}
```

```css
.mat-corner-lg {
  border-radius: var(--mat-sys-corner-large);
}
```

```css
.mat-corner-xl {
  border-radius: var(--mat-sys-corner-extra-large);
}
```

```css
.mat-corner-full {
  border-radius: var(--mat-sys-corner-full);
}
```

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

### Define a theme with custom primary and tertiary palettes

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

Configures a violet primary palette and orange tertiary palette with a fixed light theme type.

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

html {
  @include mat.theme((
    color: (
      primary: mat.$violet-palette,
      tertiary: mat.$orange-palette,
      theme-type: light,
    ),
    typography: Roboto,
    density: 0
  ));
}
```

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

### Apply System-Level Theme Overrides

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

Uses the mat.theme-overrides mixin to redefine specific CSS variables within a theme.

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

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

  .example-orange-primary-container {
    @include mat.theme-overrides((
      primary-container: #84ffff
    ));
  }
}
```

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

### Define a basic Angular Material theme

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

Applies a violet color palette, Roboto font, and standard density to the application.

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

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

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

### Apply small display typography

Source: https://material.angular.dev/guide/theming-your-components

Use for short, important text or numerals.

```css
.mat-font-display-sm {
  font: var(--mat-sys-display-small);
  letter-spacing: var(--mat-sys-display-small-tracking);
}
```

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

### Configure Class-Based Light and Dark Mode

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

Define a default light mode and use a CSS class selector to override the color-scheme for dark mode.

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

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

body.dark-mode {
  color-scheme: dark;
}
```

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

### Load Google Fonts via HTML

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

Include these link tags in the application's <head> to load the Roboto and Open Sans font families.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
```

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

### Available color system tokens

Source: https://material.angular.dev/guide/theming-your-components

A list of CSS variables prefixed with --mat-sys that represent the available color system tokens.

```css
/* Primary */
--mat-sys-primary
--mat-sys-on-primary
--mat-sys-primary-container
--mat-sys-on-primary-container
--mat-sys-primary-fixed
--mat-sys-on-primary-fixed
--mat-sys-on-primary-fixed-variant
--mat-sys-primary-fixed-dim
--mat-sys-inverse-primary

/* Secondary */
--mat-sys-secondary
--mat-sys-on-secondary
--mat-sys-secondary-container
--mat-sys-on-secondary-container
--mat-sys-secondary-fixed
--mat-sys-on-secondary-fixed
--mat-sys-on-secondary-fixed-variant
--mat-sys-secondary-fixed-dim

/* Tertiary */
--mat-sys-tertiary
--mat-sys-on-tertiary
--mat-sys-tertiary-container
--mat-sys-on-tertiary-container
--mat-sys-tertiary-fixed
--mat-sys-on-tertiary-fixed
--mat-sys-on-tertiary-fixed-variant
--mat-sys-tertiary-fixed-dim

/* Error */
--mat-sys-error
--mat-sys-on-error
--mat-sys-error-container
--mat-sys-on-error-container

/* Surface */
--mat-sys-surface
--mat-sys-on-surface
--mat-sys-on-surface-variant
--mat-sys-surface-bright
--mat-sys-surface-container
--mat-sys-surface-container-high
--mat-sys-surface-container-highest
--mat-sys-surface-container-low
--mat-sys-surface-container-lowest
--mat-sys-surface-dim
--mat-sys-surface-tint
--mat-sys-surface-variant
--mat-sys-inverse-surface
--mat-sys-inverse-on-surface

/* Miscellaneous */
--mat-sys-background
--mat-sys-on-background
--mat-sys-neutral-variant20
--mat-sys-neutral10
--mat-sys-outline
--mat-sys-outline-variant
--mat-sys-scrim
--mat-sys-shadow
```

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

### Apply Elevation Utility Classes

Source: https://material.angular.dev/guide/theming-your-components

CSS classes that apply specific elevation levels using box-shadow variables.

```css
.mat-shadow-1 {
  box-shadow: var(--mat-sys-level1);
}
```

```css
.mat-shadow-2 {
  box-shadow: var(--mat-sys-level2);
}
```

```css
.mat-shadow-3 {
  box-shadow: var(--mat-sys-level3);
}
```

```css
.mat-shadow-4 {
  box-shadow: var(--mat-sys-level4);
}
```

```css
.mat-shadow-5 {
  box-shadow: var(--mat-sys-level5);
}
```

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

### Apply On Primary Color

Source: https://material.angular.dev/guide/theming-your-components

Use for text and icons on primary backgrounds to maintain accessibility.

```css
.mat-text-on-primary {
  color: var(--mat-sys-on-primary);
}
```

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

### Define Corner Shape System Tokens

Source: https://material.angular.dev/guide/theming-your-components

A comprehensive list of available CSS custom properties for corner radius configurations.

```css
--mat-sys-corner-extra-large: 28px;
--mat-sys-corner-extra-large-top: 28px 28px 0 0;
--mat-sys-corner-extra-small: 4px;
--mat-sys-corner-extra-small-top: 4px 4px 0 0;
--mat-sys-corner-full: 9999px;
--mat-sys-corner-large: 16px;
--mat-sys-corner-large-end: 0 16px 16px 0;
--mat-sys-corner-large-start: 16px 0 0 16px;
--mat-sys-corner-large-top: 16px 16px 0 0;
--mat-sys-corner-medium: 12px;
--mat-sys-corner-none: 0;
--mat-sys-corner-small: 8px;
```

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

### Define Elevation System Tokens

Source: https://material.angular.dev/guide/theming-your-components

CSS variables representing different levels of elevation shadows.

```css
--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);
--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, .2), 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12);
--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, .2), 0px 12px 17px 2px rgba(0, 0, 0, .14), 0px 5px 22px 4px rgba(0, 0, 0, .12);
```

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

### Primary container background utility class

Source: https://material.angular.dev/guide/theming-your-components

Utility class for applying the primary container background color.

```css
.mat-bg-primary-container {
  background-color: var(--mat-sys-primary-container);
}
```

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

### Apply Surface Background Colors

Source: https://material.angular.dev/guide/theming-your-components

CSS classes for applying various surface background colors to components.

```css
.mat-bg-surface {
  background-color: var(--mat-sys-surface);
}
```

```css
.mat-bg-surface-variant {
  background-color: var(--mat-sys-surface-variant);
}
```

```css
.mat-bg-surface-container-highest {
  background-color: var(--mat-sys-surface-container-highest);
}
```

```css
.mat-bg-surface-container-high {
  background-color: var(--mat-sys-surface-container-high);
}
```

```css
.mat-bg-surface-container {
  background-color: var(--mat-sys-surface-container);
}
```

```css
.mat-bg-surface-container-low {
  background-color: var(--mat-sys-surface-container-low);
}
```

```css
.mat-bg-surface-container-lowest {
  background-color: var(--mat-sys-surface-container-lowest);
}
```

```css
.mat-bg-inverse-surface {
  background-color: var(--mat-sys-inverse-surface);
}
```

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

### Include base styles for a component

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

Use the component's base mixin to include structural styles like border-radius and border-width. This should be included once per application.

```scss
@include mat.checkbox-base($theme)
```

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

### Apply Primary Text Color

Source: https://material.angular.dev/guide/theming-your-components

CSS class for primary text styling.

```css
.mat-text-primary {
  color: var(--mat-sys-primary);
}
```

```text
Example text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```

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

### Define Color Palettes for a Theme

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

Defines primary, accent, and optional warn color palettes using Sass. Requires importing the Angular Material Sass API.

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

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

### Apply On Surface Color

Source: https://material.angular.dev/guide/theming-your-components

Use for text that contrasts against a surface background.

```css
.mat-text-on-surface {
  color: var(--mat-sys-on-surface);
}
```

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

### Apply On Primary Container Color

Source: https://material.angular.dev/guide/theming-your-components

Use for text and icons on primary-container backgrounds to maintain accessibility.

```css
.mat-text-on-primary-container {
  color: var(--mat-sys-on-primary-container);
}
```

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

### Apply Core and Button Theme Styles

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

Applies prerequisite styles for common features and button-specific styles using Sass mixins. Requires the theme definition and importing the Angular Material Sass API.

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

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

// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `m2-define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.button-theme($my-theme);

// Include the theme mixins for other components you use here.
```

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

### Apply Multiple Themes with mat.theme

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

Use the mat.theme mixin multiple times to apply different color palettes to specific containers within an application.

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

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0,
  ));
}

.example-bright-container {
  @include mat.theme((
    color: mat.$cyan-palette,
  ));
}
```

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

### Include density styles for a component

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

Use the component's density mixin to include styles related to element size and spacing. This may need to be included multiple times for different density modes, such as normal and compact.

```scss
@include mat.checkbox-density($theme)
```

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

### Primary background utility class

Source: https://material.angular.dev/guide/theming-your-components

Utility class for applying the primary background color.

```css
.mat-bg-primary {
  background-color: var(--mat-sys-primary);
}
```

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

### Apply On Secondary Container Color

Source: https://material.angular.dev/guide/theming-your-components

Use for text that contrasts against a secondary-container background.

```css
.mat-text-on-secondary-container {
  color: var(--mat-sys-on-secondary-container);
}
```

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

### Apply Body Typography Styles

Source: https://material.angular.dev/guide/theming-your-components

CSS classes for applying small, medium, and large body typography styles using system tokens.

```css
.mat-font-body-sm {
  font: var(--mat-sys-body-small);
  letter-spacing: var(--mat-sys-body-small-tracking);
}
```

```css
.mat-font-body-md {
  font: var(--mat-sys-body-medium);
  letter-spacing: var(--mat-sys-body-medium-tracking);
}
```

```css
.mat-font-body-lg {
  font: var(--mat-sys-body-large);
  letter-spacing: var(--mat-sys-body-large-tracking);
}
```

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

### Apply small title typography

Source: https://material.angular.dev/guide/theming-your-components

Use for card titles, table headers, or option group labels.

```css
.mat-font-title-sm {
  font: var(--mat-sys-title-small);
  letter-spacing: var(--mat-sys-title-small-tracking);
}
```

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

### Custom Stepper Component Template

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

The HTML template for the custom stepper. It displays the current step, projects content from `CdkStep`, and includes navigation buttons and step indicators.

```html
<section class="container">
  <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header>

  <div [style.display]="selected ? 'block' : 'none'">
    <!-- Content from the CdkStep is projected here -->
    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  </div>

  <footer class="step-navigation-bar">
    <button class="nav-button" cdkStepperPrevious>&larr;</button>
    @for (step of steps; track step; let i = $index) {
      <button class="step" [class.active]="selectedIndex === i" (click)="onClick(i)">
        Step {{i + 1}}
      </button>
    }
    <button class="nav-button" cdkStepperNext>&rarr;</button>
  </footer>
</section>
```

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

### Apply medium headline typography

Source: https://material.angular.dev/guide/theming-your-components

Use for section titles.

```css
.mat-font-headline-md {
  font: var(--mat-sys-headline-medium);
  letter-spacing: var(--mat-sys-headline-medium-tracking);
}
```

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

### Apply Border Classes

Source: https://material.angular.dev/guide/theming-your-components

CSS classes for applying standard or subtle borders using outline tokens.

```css
.mat-border {
  border: 1px solid var(--mat-sys-outline);
}
```

```css
.mat-border-subtle {
  border: 1px solid var(--mat-sys-outline-variant);
}
```

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

### Configure Typography Map

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

Applies distinct font families for plain and brand text, along with custom font weights within the theme configuration.

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

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: (
      plain-family: Roboto,
      brand-family: Open Sans,
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
    density: 0,
  ));
}
```

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

### Custom Stepper Component Implementation

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

Extends `CdkStepper` to create a custom stepper. Provides itself as `CdkStepper` for recognition by other components and includes a method to handle step clicks.

```typescript
@Component({
  selector: 'app-custom-stepper',
  templateUrl: './custom-stepper.component.html',
  styleUrl: './custom-stepper.component.css',
  // This custom stepper provides itself as CdkStepper so that it can be recognized
  // by other components.
  providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
})
export class CustomStepperComponent extends CdkStepper {
  onClick(index: number): void {
    this.selectedIndex = index;
  }
}
```

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

### Read Density Scale from Theme

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

Use `get-theme-density` to retrieve the density scale value configured within a theme.

```scss
$theme: mat.m2-define-dark-theme(...);

$density-scale: mat.get-theme-density($theme);
```

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

### Include color styles for a component

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

Use the component's color mixin to include styles related to application colors. This may need to be included multiple times for different configurations, such as light and dark themes.

```scss
@include mat.checkbox-color($theme)
```

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

### Apply M3 Theme Globally (SCSS)

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

Applies a Material 3 theme globally by including the `mat.theme` mixin within the `html` selector. This is the recommended approach for v19+.

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

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0,
  ));
}
```

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

### Style Components with Theme CSS Variables

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

Apply theme-defined color and typography variables directly to custom component styles for consistent branding and contrast.

```css
.my-component {
  background: var(--mat-sys-primary-container);
  color: var(--mat-sys-on-primary-container);
  border: 1px solid var(--mat-sys-outline-variant);
  font: var(--mat-sys-body-large);
}
```

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

### Apply large display typography

Source: https://material.angular.dev/guide/theming-your-components

Use for short, high-emphasis text in hero sections.

```css
.mat-font-display-lg {
  font: var(--mat-sys-display-large);
  letter-spacing: var(--mat-sys-display-large-tracking);
}
```

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

### Secondary container background utility class

Source: https://material.angular.dev/guide/theming-your-components

Utility class for applying the secondary container background color.

```css
.mat-bg-secondary-container {
  background-color: var(--mat-sys-secondary-container);
}
```

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

### Enable strong focus indicators in a theme

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

Include the strong-focus-indicators mixin within your theme configuration to apply default accessible focus outlines.

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

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

### Configure Component Density

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

Sets the density scale to -2 to reduce whitespace in component layouts while applying a standard font family.

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

html {
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: -2,
  ));
}
```

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

### Include Material 2 backwards compatibility styles for color variants

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

Use this mixin to enable backwards compatibility for color variants in M3 themes. This restores the behavior of the `color="primary"`, `color="accent"`, or `color="warn"` options.

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

$theme: mat.define-theme();

html {
  @include mat.all-component-themes($theme);
  @include mat.color-variants-backwards-compatibility($theme);
}
```

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

### Apply On Secondary Color

Source: https://material.angular.dev/guide/theming-your-components

Use for text and icons on secondary backgrounds to maintain accessibility.

```css
.mat-text-on-secondary {
  color: var(--mat-sys-on-secondary);
}
```

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

### Component Theme Compatibility Check (SCSS)

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

Checks the theme version using `mat.get-theme-version` to conditionally apply Material 3 or Material 2 styles within a component's theme mixin.

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

@mixin my-comp-theme($theme) {
  @if (mat.get-theme-version($theme) == 1) {
    // Add your new M3 styles here.
  } @else {
    // Keep your old M2 styles here.
  }
}
```

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

### Define a custom typography config

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

Use `m2-define-typography-config` to create a map of all typography levels for your theme. Parameters for each level are optional and default to Material Design's baseline if not specified.

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

$my-custom-typography-config: mat.m2-define-typography-config(
  $headline-1: mat.m2-define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.m2-define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.m2-define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.m2-define-typography-level(34px, 40px, 400),
  $headline-5: mat.m2-define-typography-level(24px, 32px, 400),
  // ...
);
```

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

### Apply large label typography

Source: https://material.angular.dev/guide/theming-your-components

Use for buttons, chips, and menu labels.

```css
.mat-font-label-lg {
  font: var(--mat-sys-label-large);
  letter-spacing: var(--mat-sys-label-large-tracking);
}
```

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

### Implement MatFormFieldControl Interface

Source: https://material.angular.dev/guide/creating-a-custom-form-field-control

This snippet shows the basic structure for implementing the `MatFormFieldControl` interface, including dependency injection for `MatFormField`.

```typescript
export class MyTelInput implements MatFormFieldControl<MyTel> {
  ... 

  constructor(... 
              @Optional() public parentFormField: MatFormField) {

```

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

### Use a Predefined Angular Material Palette

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

Imports and assigns a predefined Material Design palette from the Angular Material library. This palette can then be used when defining a custom theme.

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

$my-palette: mat.$m2-indigo-palette;
```

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

### Interact with MatButton Harness

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

Interact with component harnesses using their provided methods, such as `click()`, `isDisabled()`, or `getText()`. The CDK harnesses automatically handle change detection and wait for the fixture to be stable after actions.

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

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

### Apply medium title typography

Source: https://material.angular.dev/guide/theming-your-components

Use for dialog titles, list item text, card subtitles, or expansion panel headers.

```css
.mat-font-title-md {
  font: var(--mat-sys-title-medium);
  letter-spacing: var(--mat-sys-title-medium-tracking);
}
```

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

### Read Material 2 Theme Colors and Type with Sass

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

Use `get-theme-color` to read specific colors from primary, accent, warn, foreground, or background palettes. `get-theme-type` helps determine if the theme is light or dark, which can be used for conditional styling.

```scss
$theme: mat.m2-define-dark-theme(...);

$primary-default: mat.get-theme-color($theme, primary, default);
$accent-a100: mat.get-theme-color($theme, accent, A100);
$warn-500-contrast: mat.get-theme-color($theme, warn, 500-contrast);
$foreground-text: mat.get-theme-color($theme, foreground, text);
$background-card: mat.get-theme-color($theme, background, card);
$type: mat.get-theme-type($theme);
$custom-background: if($type == dark, #030, #dfd);
```

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

### Style Placeholder Based on Floating State

Source: https://material.angular.dev/guide/creating-a-custom-form-field-control

Apply CSS to control the opacity of placeholder elements. The placeholder is visible (opacity 1) when the host element has the 'floating' class, and hidden (opacity 0) otherwise.

```css
span {
  opacity: 0;
  transition: opacity 200ms;
}
:host.floating span {
  opacity: 1;
}
```

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

### Apply medium label typography

Source: https://material.angular.dev/guide/theming-your-components

Use for slider labels.

```css
.mat-font-label-md {
  font: var(--mat-sys-label-medium);
  letter-spacing: var(--mat-sys-label-medium-tracking);
}
```

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

### Apply large title typography

Source: https://material.angular.dev/guide/theming-your-components

Use for page titles on small screens, card titles, or toolbar titles.

```css
.mat-font-title-lg {
  font: var(--mat-sys-title-large);
  letter-spacing: var(--mat-sys-title-large-tracking);
}
```
Tokens:
Raw