API for expansion

API reference for Angular Material expansion

import {MatExpansionModule} from '@angular/material/expansion';

Directive for a Material Design Accordion.

Selector: mat-accordion

Exported as: matAccordion
Properties
Name Description
@Input()

displayMode: MatAccordionDisplayMode

Display mode used for all expansion panels in the accordion. Currently two display modes exist: default - a gutter-like spacing is placed around any expanded panel, placing the expanded panel at a different elevation from the rest of the accordion. flat - no spacing is placed around expanded panels, showing all panels at the same elevation.

@Input({ transform: booleanAttribute })

hideToggle: boolean

Whether the expansion indicator should be hidden.

@Input({ transform: booleanAttribute })

multi: boolean

Whether the accordion should allow multiple expanded accordion items simultaneously.

@Input()

togglePosition: MatAccordionTogglePosition

The position of the expansion indicator.

id: string

A readonly id value to use for unique selection coordination.

Methods
closeAll

Closes all enabled accordion items.

openAll

Opens all enabled accordion items in an accordion where multi is enabled.

This component can be used as a single element to show expandable content, or as one of multiple children of an element with the MatAccordion directive attached.

Selector: mat-expansion-panel

Exported as: matExpansionPanel
Properties
Name Description
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the AccordionItem is disabled.

@Input({ transform: booleanAttribute })

expanded: boolean

Whether the AccordionItem is expanded.

@Input({ transform: booleanAttribute })

hideToggle: boolean

Whether the toggle indicator should be hidden.

@Input()

togglePosition: MatAccordionTogglePosition

The position of the expansion indicator.

@Output()

afterCollapse: EventEmitter<void>

An event emitted after the body's collapse animation happens.

@Output()

afterExpand: EventEmitter<void>

An event emitted after the body's expansion animation happens.

@Output()

closed: EventEmitter<void>

Event emitted every time the AccordionItem is closed.

@Output()

destroyed: EventEmitter<void>

Event emitted when the AccordionItem is destroyed.

@Output()

opened: EventEmitter<void>

Event emitted every time the AccordionItem is opened.

accordion: inject<MatAccordionBase>(MAT_ACCORDION, { optional: true, skipSelf: true })!

Optionally defined accordion the expansion panel belongs to.

id: string

The unique AccordionItem id.

Methods
close

Sets the expanded state of the expansion panel to false.

open

Sets the expanded state of the expansion panel to true.

toggle

Toggles the expanded state of the expansion panel.

Actions of a <mat-expansion-panel>.

Selector: mat-action-row

Header element of a <mat-expansion-panel>.

Selector: mat-expansion-panel-header

Properties
Name Description
@Input()

collapsedHeight: string

Height of the header while the panel is collapsed.

@Input()

expandedHeight: string

Height of the header while the panel is expanded.

panel: inject(MatExpansionPanel, { host: true })

Description element of a <mat-expansion-panel-header>.

Selector: mat-panel-description

Title element of a <mat-expansion-panel-header>.

Selector: mat-panel-title

Expansion panel content that will be rendered lazily after the panel is opened for the first time.

Selector: ng-template[matExpansionPanelContent]

Object that can be used to override the default options for all of the expansion panels in a module.

Properties
Name Description

collapsedHeight: string

Height of the header while the panel is collapsed.

expandedHeight: string

Height of the header while the panel is expanded.

hideToggle: boolean

Whether the toggle indicator should be hidden.

MatAccordion's display modes.

type MatAccordionDisplayMode = 'default' | 'flat';

MatAccordion's toggle positions.

type MatAccordionTogglePosition = 'before' | 'after';

MatExpansionPanel's states.

type MatExpansionPanelState = 'expanded' | 'collapsed';

Token used to provide a MatExpansionPanel to MatExpansionPanelContent. Used to avoid circular imports between MatExpansionPanel and MatExpansionPanelContent.

const MAT_EXPANSION_PANEL: InjectionToken<MatExpansionPanelBase>;

Token used to provide a MatAccordion to MatExpansionPanel. Used primarily to avoid circular imports between MatAccordion and MatExpansionPanel.

const MAT_ACCORDION: InjectionToken<MatAccordionBase>;

Injection token that can be used to configure the default options for the expansion panel component.

const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;

Time and timing curve for expansion panel animations.

const EXPANSION_PANEL_ANIMATION_TIMING: "225ms cubic-bezier(0.4,0.0,0.2,1)";

API reference for Angular Material expansion-testing

import {MatAccordionHarness} from '@angular/material/expansion/testing';

Harness for interacting with a standard mat-accordion in tests.

Properties
Name Description

static hostSelector: '.mat-accordion'

Methods
async
getExpansionPanels

Gets all expansion panels which are part of the accordion.

Parameters

filter

ExpansionPanelHarnessFilters = {}

Returns
Promise<MatExpansionPanelHarness[]>

async
host

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

Returns
Promise<TestElement>

async
isMulti

Whether the accordion allows multiple expanded panels simultaneously.

Returns
Promise<boolean>

static
with

Gets a HarnessPredicate that can be used to search for an accordion with specific attributes.

Parameters

options

AccordionHarnessFilters = {}

Options for narrowing the search.

Returns
HarnessPredicate<MatAccordionHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard mat-expansion-panel in tests.

Properties
Name Description

static hostSelector: '.mat-expansion-panel'

Methods
async
blur

Blurs the panel.

Returns
Promise<void>

Promise that resolves when the action completes.

async
collapse

Collapses the expansion panel if expanded.

Returns
Promise<void>

Promise that resolves when the action completes.

async
expand

Expands the expansion panel if collapsed.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the panel.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAllChildLoaders
Parameters

selector

S

Returns
Promise<HarnessLoader[]>

async
getAllHarnesses
Parameters

query

HarnessQuery<T>

Returns
Promise<T[]>

async
getChildLoader
Parameters

selector

S

Returns
Promise<HarnessLoader>

async
getDescription

Gets the description text of the panel.

Returns
Promise<string | null>

Description text or null if no description is set up.

async
getHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<T>

async
getHarnessOrNull
Parameters

query

HarnessQuery<T>

Returns
Promise<T | null>

async
getTextContent

Gets the text content of the panel.

Returns
Promise<string>

async
getTitle

Gets the title text of the panel.

Returns
Promise<string | null>

Title text or null if no title is set up.

async
getToggleIndicatorPosition

Gets the position of the toggle indicator.

Returns
Promise<'before' | 'after'>

async
hasHarness
Parameters

query

HarnessQuery<T>

Returns
Promise<boolean>

async
hasToggleIndicator

Whether the panel has a toggle indicator displayed.

Returns
Promise<boolean>

async
host

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

Returns
Promise<TestElement>

async
isDisabled

Whether the panel is disabled.

Returns
Promise<boolean>

async
isExpanded

Whether the panel is expanded.

Returns
Promise<boolean>

async
isFocused

Whether the panel is focused.

Returns
Promise<boolean>

async
toggle

Toggles the expanded state of the panel by clicking on the panel header. This method will not work if the panel is disabled.

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

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

Parameters

options

ExpansionPanelHarnessFilters = {}

Options for narrowing the search:

  • title finds an expansion-panel with a specific title text.
  • description finds an expansion-panel with a specific description text.
  • expanded finds an expansion-panel that is currently expanded.
  • disabled finds an expansion-panel that is disabled.

Returns
HarnessPredicate<MatExpansionPanelHarness>

a HarnessPredicate configured with the given options.

Deprecated
async
getHarnessLoaderForContent

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

Returns
Promise<HarnessLoader>

Properties
Name Description

content: string | RegExp

description: string | RegExp | null

disabled: boolean

expanded: boolean

title: string | RegExp | null

Azure & Blue theme selected.