Angular Accordion Component | ng-hub-ui-accordion
Accessible Angular accordion component for FAQ sections, settings panels and expandable content with keyboard navigation and CSS variables.
Overview
Why teams search for this library
Use this Angular accordion component when you need accessible disclosure patterns, keyboard navigation, template flexibility and CSS-variable theming without carrying a heavy UI framework.
Install
npm install ng-hub-ui-accordionJump to
Ideal for
- FAQ sections
- settings panels
- advanced forms
- progressive disclosure UIs
About accordion
ng-hub-ui-accordion gives Angular teams a reusable accordion component for FAQs, advanced forms and settings areas. It works well with standalone apps, supports keyboard interaction and keeps styling under control through CSS custom properties.
Feature guides
Core Features
Essential accordion functionality built with modern Angular Signals architecture.
Examples:
Basic Setup
Basic Setup
Live preview is not available for this example yet.
Code
Multiple Panel Expansion
Multiple Panel Expansion
Live preview is not available for this example yet.
Code
Form Integration
Complete form integration with Angular's reactive forms and template-driven forms through ControlValueAccessor.
Examples:
Reactive Forms
Reactive Forms
Live preview is not available for this example yet.
Code
Template-driven Forms
Template-driven Forms
Live preview is not available for this example yet.
Code
Bind Value
Bind Value
Live preview is not available for this example yet.
Code
Custom Templates
Rich header customization with the hubAccordionPanelHeader directive for complex interactive headers.
Examples:
Custom Header Templates
Custom Header Templates
Live preview is not available for this example yet.
Code
Complex Interactive Headers
Complex Interactive Headers
Live preview is not available for this example yet.
Code
Advanced Configuration
Advanced features including flush mode, dynamic panels, and custom comparison functions.
Examples:
Flush Mode
Flush Mode
Live preview is not available for this example yet.
Code
Dynamic Panels
Dynamic Panels
Live preview is not available for this example yet.
Code
Custom Value Comparison
Custom Value Comparison
Live preview is not available for this example yet.
Code
Accessibility Features
Built-in accessibility features following WCAG 2.1 AA guidelines with full keyboard navigation and screen reader support.
Examples:
Keyboard Navigation
Keyboard Navigation
Live preview is not available for this example yet.
Code
Accessibility Features
Accessibility Features
Live preview is not available for this example yet.
Code
Key features
Accessible keyboard flow
Supports predictable focus management, ARIA semantics and keyboard navigation for disclosure interfaces.
Great for Angular forms
Organize dense settings forms and progressive disclosure flows without custom accordion logic per project.
CSS-variable theming
Adjust spacing, headers, borders and state colours through design-system friendly CSS tokens.
Recent changes
Version 21.1.1 - 3/19/26, 12:00 AM
fixed: Fixed bindValue not applied in value comparison and storage. Added getComparableValue() and readByPath() helpers.
fixed: CSS variable declarations now bundled via styleUrl — no manual stylesheet import required.
removed: Removed orphaned src/lib/styles/accordion.scss. Updated README and css-variables-reference.md.
Version 21.1.0 - 3/9/26, 12:00 AM
added: CSS variables reference documentation.
changed: Replaced hardcoded values with sys/ref token system.
Version 19.0.6 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples
added: Multiple expansion example component
added: Reactive forms integration example with real-time value display
added: Template-driven forms example component
added: Custom header templates example with icons and badges
added: Complex interactive headers example with order management
added: Flush (borderless) mode example component
added: Dynamic panels example with add/remove functionality
added: Custom value comparison example for complex objects
added: Accessibility example with ARIA and keyboard navigation
added: Live functional examples in documentation with syntax highlighting
changed: Updated documentation structure with dedicated overview, API, and examples sections
changed: Enhanced code examples with proper TypeScript and HTML highlighting
changed: Improved example organization by functionality categories