### 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
```
--------------------------------
### 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
```
--------------------------------
### Applying Theme Styles with Utility Classes
Source: https://material.angular.dev/guide/theming
Example of how to use the generated system utility classes to apply surface background and on-surface text colors to the body element.
```html
```
--------------------------------
### 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
```
--------------------------------
### Basic Theme Setup with Violet Palette
Source: https://material.angular.dev/guide/theming
Sets up a basic theme using the violet color palette, Roboto font, and standard density. It targets the `html` selector and sets `color-scheme` to `light dark` for automatic mode switching.
```scss
@use '@angular/material' as mat;
html {
color-scheme: light dark;
@include mat.theme((
color: mat.$violet-palette,
typography: Roboto,
density: 0
));
}
```
--------------------------------
### Apply Multiple Themes Contextually
Source: https://material.angular.dev/guide/theming
Define multiple themes by calling the `mat.theme` mixin more than once. This example applies a default violet theme and a specific cyan theme to elements within '.example-bright-container'.
```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 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);
```
--------------------------------
### Enable Strong Focus Indicators
Source: https://material.angular.dev/guide/theming
Call `mat.strong-focus-indicators()` to enable highly visible outlines on focused elements, improving accessibility. This example includes it alongside a custom 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();
}
```
--------------------------------
### Load Google Fonts
Source: https://material.angular.dev/guide/theming
Include this HTML in your application's `` to load specific font families and weights from Google Fonts. This example loads Roboto with weights 400, 500, and 700, and Open Sans with weights 300 through 800.
```html
```
--------------------------------
### Apply Typography Map to Theme
Source: https://material.angular.dev/guide/theming
Use this to set distinct font families for plain and brand text, and specify weights for bold, medium, and regular text. This example uses Roboto for plain text and Open Sans for brand text, with custom weights and the violet color palette.
```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,
));
}
```
--------------------------------
### 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;
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();
});
});
```
--------------------------------
### Apply Density to Theme
Source: https://material.angular.dev/guide/theming
Adjusts the spacing within components by setting a density value. A value of -2 reduces whitespace, making the layout more compact. This example also applies the violet color palette and Roboto font family.
```scss
@use '@angular/material' as mat;
html {
@include mat.theme((
color: mat.$violet-palette,
typography: Roboto,
density: -2,
));
}
```
--------------------------------
### 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;
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();
});
});
```
--------------------------------
### Customize Strong Focus Indicator Appearance
Source: https://material.angular.dev/guide/typography
Customize the appearance of strong focus indicators by passing a configuration map to the `strong-focus-indicators` mixin. This example sets custom border color, style, width, and radius.
```scss
@use '@angular/material' as mat;
@include mat.strong-focus-indicators((
border-color: red,
border-style: dotted,
border-width: 4px,
border-radius: 2px,
));
```
--------------------------------
### 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 `` component.
```html
```
--------------------------------
### Use Theme Styles with CSS Variables
Source: https://material.angular.dev/guide/theming
Apply theme colors and typography to custom components using CSS variables generated by `mat.theme`. This example styles a banner with primary container background, on-primary container text, and body large font.
```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);
}
```
--------------------------------
### Customize Strong Focus Indicator Appearance
Source: https://material.angular.dev/guide/theming
Pass a configuration map to `mat.strong-focus-indicators` to customize the border color, style, width, and radius of the focus indicators. This example sets custom dotted red borders.
```scss
@use "@angular/material" as mat;
@include mat.strong-focus-indicators((
border-color: red,
border-style: dotted,
border-width: 4px,
border-radius: 2px,
));
```
--------------------------------
### Override System Tokens with mat.theme overrides map
Source: https://material.angular.dev/guide/theming
Alternatively, provide an optional override map directly within the `mat.theme` mixin to replace values. This example sets the `primary-container` token to orange.
```scss
@use "@angular/material" as mat;
html {
color-scheme: light dark;
@include mat.theme((
color: mat.$violet-palette,
typography: Roboto,
density: 0
), $overrides: (
primary-container: orange,
));
}
```
--------------------------------
### Customize Card Component Tokens
Source: https://material.angular.dev/guide/theming
Utilize the `mat.card-overrides` mixin to customize specific tokens for the Card component. This example changes the background color, border radius, and title font size.
```scss
html {
@include mat.card-overrides((
elevated-container-color: red,
elevated-container-shape: 32px,
title-text-size: 2rem,
));
}
```
--------------------------------
### 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);
});
```
--------------------------------
### 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();
}
}
```
--------------------------------
### Override System Tokens with mat.theme-overrides
Source: https://material.angular.dev/guide/theming
Use the `mat.theme-overrides` mixin to redefine CSS variables for system tokens. This example applies a violet color palette while specifically changing the `primary-container` token to a shade of blue.
```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
));
}
}
```
--------------------------------
### 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
@for (step of mySteps; track step) {
}
```
--------------------------------
### 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);
});
}
```
--------------------------------
### Enabling System Utility Classes
Source: https://material.angular.dev/guide/theming
Includes system utility classes for applying theme styles directly from component templates. This allows for easy application of background and text colors.
```scss
html {
...
@include mat.system-classes();
}
```
--------------------------------
### 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
```
--------------------------------
### Conditional Dark Mode with CSS Class
Source: https://material.angular.dev/guide/theming
Apply a dark theme conditionally by setting `color-scheme` within a CSS selector. This example applies dark mode when the 'dark-mode' class is present on the body.
```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;
}
```
--------------------------------
### 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)
```
--------------------------------
### Apply Theme Styles using Utility Classes
Source: https://material.angular.dev/guide/theming-your-components
Applies theme styles in the component template using Material Design utility classes for background, text color, and font.
```html
```
--------------------------------
### 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);
```
--------------------------------
### 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,
));
```
--------------------------------
### 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
```
--------------------------------
### 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);
}
```
--------------------------------
### 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