ExpansionPanelComponent

Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation (see overview).

html

<kendo-expansionpanel
  title="Chile"
  subtitle="South America"
  [expanded]="isExpanded">
  There are various theories about the origin of the word Chile.
</kendo-expansionpanel>

Selector

kendo-expansionpanel

Export Name

Accessible in templates as #kendoExpansionPanelInstance="kendoExpansionPanel"

Inputs

Name	Type	Default	Description
animation?	number | boolean	true	Specifies the animation settings of the ExpansionPanel (see example).
collapseIcon	string		Sets a custom icon via CSS class(es) for the expanded state of the component (see example).
disabled	boolean	false	Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed (see example).
expanded	boolean	false	Specifies whether the ExpansionPanel is expanded. The property supports two-way binding (see example).
expandIcon	string		Sets a custom icon via CSS class(es) for the collapsed state of the component (see example).
subtitle	string		Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon (see example).
svgCollapseIcon	SVGIcon		Defines an SVG icon for the collapsed state of the component. You can use either an existing Kendo SVG icon or a custom one.
svgExpandIcon	SVGIcon		Defines an SVG icon for the expanded state of the component. You can use either an existing Kendo SVG icon or a custom one.
title	string		Specifies the primary text in the header of the ExpansionPanel (see example).

Events

Name	Type	Description
action	EventEmitter<ExpansionPanelActionEvent>	Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable (see example).
collapse	EventEmitter<any>	Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete (see example).
expand	EventEmitter<any>	Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete (see example).
expandedChange	EventEmitter<boolean>	Fires when the expanded property of the component is updated. Used to provide a two-way binding for the expanded property (see example).

Methods

toggle
Toggles the visibility of the ExpansionPanel (see example).
Parameters expanded? boolean Specifies whether the ExpansionPanel will be expanded or collapsed.