API reference for Angular Material expansion
import {MatExpansionModule} from '@angular/material/expansion';
Directives
MatAccordion
extends
CdkAccordion
Directive for a Material Design Accordion.
Selector: mat-accordion
Exported as: matAccordionProperties
Name | Description |
---|---|
@Input()
|
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 })
|
Whether the expansion indicator should be hidden. |
@Input({ transform: booleanAttribute })
|
Whether the accordion should allow multiple expanded accordion items simultaneously. |
@Input()
|
The position of the expansion indicator. |
|
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. |
MatExpansionPanel
extends
CdkAccordionItem
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: matExpansionPanelProperties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the AccordionItem is disabled. |
@Input({ transform: booleanAttribute })
|
Whether the AccordionItem is expanded. |
@Input({ transform: booleanAttribute })
|
Whether the toggle indicator should be hidden. |
@Input()
|
The position of the expansion indicator. |
@Output()
|
An event emitted after the body's collapse animation happens. |
@Output()
|
An event emitted after the body's expansion animation happens. |
@Output()
|
Event emitted every time the AccordionItem is closed. |
@Output()
|
Event emitted when the AccordionItem is destroyed. |
@Output()
|
Event emitted every time the AccordionItem is opened. |
|
Optionally defined accordion the expansion panel belongs to. |
|
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. |
MatExpansionPanelActionRow
Actions of a <mat-expansion-panel>
.
Selector: mat-action-row
MatExpansionPanelHeader
Header element of a <mat-expansion-panel>
.
Selector: mat-expansion-panel-header
Properties
Name | Description |
---|---|
@Input()
|
Height of the header while the panel is collapsed. |
@Input()
|
Height of the header while the panel is expanded. |
|
MatExpansionPanelDescription
Description element of a <mat-expansion-panel-header>
.
Selector: mat-panel-description
MatExpansionPanelTitle
Title element of a <mat-expansion-panel-header>
.
Selector: mat-panel-title
MatExpansionPanelContent
Expansion panel content that will be rendered lazily after the panel is opened for the first time.
Selector: ng-template[matExpansionPanelContent]
Interfaces
MatExpansionPanelDefaultOptions
Object that can be used to override the default options for all of the expansion panels in a module.
Properties
Name | Description |
---|---|
|
Height of the header while the panel is collapsed. |
|
Height of the header while the panel is expanded. |
|
Whether the toggle indicator should be hidden. |
Type aliases
MatAccordionDisplayMode
MatAccordion's display modes.
type MatAccordionDisplayMode = 'default' | 'flat';
MatAccordionTogglePosition
MatAccordion's toggle positions.
type MatAccordionTogglePosition = 'before' | 'after';
MatExpansionPanelState
MatExpansionPanel's states.
type MatExpansionPanelState = 'expanded' | 'collapsed';
Constants
MAT_EXPANSION_PANEL
Token used to provide a MatExpansionPanel
to MatExpansionPanelContent
.
Used to avoid circular imports between MatExpansionPanel
and MatExpansionPanelContent
.
const MAT_EXPANSION_PANEL: InjectionToken<MatExpansionPanelBase>;
MAT_ACCORDION
Token used to provide a MatAccordion
to MatExpansionPanel
.
Used primarily to avoid circular imports between MatAccordion
and MatExpansionPanel
.
const MAT_ACCORDION: InjectionToken<MatAccordionBase>;
MAT_EXPANSION_PANEL_DEFAULT_OPTIONS
Injection token that can be used to configure the default options for the expansion panel component.
const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;
EXPANSION_PANEL_ANIMATION_TIMING
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';
Classes
MatAccordionHarness
extends
ComponentHarness
Harness for interacting with a standard mat-accordion in tests.
Properties
Name | Description |
---|---|
|
Methods
async
getExpansionPanels
|
|
---|---|
Gets all expansion panels which are part of the accordion. |
|
Parameters | |
filter ExpansionPanelHarnessFilters = {}
|
|
Returns | |
Promise<MatExpansionPanelHarness[]>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isMulti
|
|
---|---|
Whether the accordion allows multiple expanded panels simultaneously. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options AccordionHarnessFilters = {}
|
Options for narrowing the search. |
Returns | |
HarnessPredicate<MatAccordionHarness>
|
a |
MatExpansionPanelHarness
extends
ContentContainerComponentHarness
Harness for interacting with a standard mat-expansion-panel in tests.
Properties
Name | Description |
---|---|
|
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 |
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 |
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 |
|
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 |
|
Parameters | |
options ExpansionPanelHarnessFilters = {}
|
Options for narrowing the search:
|
Returns | |
HarnessPredicate<MatExpansionPanelHarness>
|
a |
Deprecated
async
getHarnessLoaderForContent
|
|
---|---|
Gets a |
|
Returns | |
Promise<HarnessLoader>
|
|
Interfaces
AccordionHarnessFilters
ExpansionPanelHarnessFilters
Properties
Name | Description |
---|---|
|
|
|
|
|
|
|
|
|