• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

ExpansionPanelComponent

Represents the Kendo UI ExpansionPanel component for Angular.

@Component({
   selector: 'my-app',
   template: `
       <kendo-expansionpanel title="Chile" subtitle="South America">
             There are various theories about the origin of the word Chile.
       </kendo-expansionpanel>
   `
})
class AppComponent {}

Selector

kendo-expansionpanel

Export Name

Accessible in templates as #kendoExpansionPanelInstance="kendoExpansionPanel"

Inputs

NameTypeDefaultDescription

animation?

number | boolean

Specifies the animation settings of the ExpansionPanel (see example).

The possible values are:

  • Boolean
    • (Default) true Numeric values represent duration. Default duration is 200ms.
    • false
  • Number

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 is rendered next to the collapse/expand icon (see example).

svgCollapseIcon

SVGIcon

Defines an SVGIcon for the collapsed state of the component. The input can take either an existing Kendo SVG icon or a custom one.

svgExpandIcon

SVGIcon

Defines an SVGIcon for the expanded state of the component. The input can take 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

NameTypeDescription

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 will fire when the animation is complete (see example).

expand

EventEmitter<any>

Fires when the ExpansionPanel is expanded. If there is animation it will fire 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

In this article

Not finding the help you need?