Expansion Panel

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()

hideToggle: boolean

Whether the expansion indicator should be hidden.
@Input()

multi: boolean

Whether the accordion should allow multiple expanded accordion items simultaneously.

id: `cdk-accordion-${nextId++}`

A readonly id value to use for unique selection coordination.
Methods
closeAll

Closes all enabled accordion items in an accordion where multi is enabled.
openAll

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

<mat-expansion-panel>

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()

disabled: any

Whether the AccordionItem is disabled.
@Input()

expanded: any

Whether the AccordionItem is expanded.
@Input()

hideToggle: boolean

Whether the toggle indicator should be hidden.
@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: MatAccordionBase

Optionally defined accordion the expansion panel belongs to.

id: string

The unique AccordionItem id.
Methods
close

Sets the expanded state of the accordion item to false.
open

Sets the expanded state of the accordion item to true.
toggle

Toggles the expanded state of the accordion item.

Selector: mat-action-row

<mat-expansion-panel-header>

This component corresponds to the header element of an <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: MatExpansionPanel

<mat-panel-description>

This directive is to be used inside of the MatExpansionPanelHeader component.

Selector: mat-panel-description

<mat-panel-title>

This directive is to be used inside of the MatExpansionPanelHeader component.

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';

MatExpansionPanel's states.

type MatExpansionPanelState = 'expanded' | 'collapsed';

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 defalt 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)";