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

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.