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

animation?

boolean | number

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

(default: false) Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed (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).

title

string

Specifies the primary text in the header of the ExpansionPanel (see example).

expanded

boolean

(default: false) Specifies whether the ExpansionPanel is expanded. The property supports two-way binding. (see example).

Events

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