Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Expansion Panel

Expansion Panel builds independent collapsible sections with a header and body. Use ngs-expansion-panel for one section, and wrap panels in ngs-accordion when a group should coordinate single or multiple open panels.

Use it for settings groups, FAQs, advanced options, filters, grouped form sections, detail sections, onboarding or setup steps, and inspector groups. Do not use it to truncate one long text block, render a tree, build tabs, force a strict stepper flow, or as a plain card/container without collapse behavior.

PropTypeDefault
disabled
Whether the expansion panel is disabled.
booleanfalse
expanded
Whether the expansion panel is expanded.
booleanfalse
hideToggle
Whether to hide the expansion indicator.
booleanfalse
EventDescription
openedEvent emitted when the panel is opened.
closedEvent emitted when the panel is closed.
expandedChangeEvent emitted when the panel expansion state changes.