Overview
The Accordion component provides an expandable and collapsible container that helps you organize content into manageable sections. Users can expand one or multiple panels to view content while keeping the interface clean and organized.
Basic usage
Import the Accordion component and use it in your Angular templates:
import { AccordionComponent } from '@flowx/angular-ui-toolkit';
@Component({
selector: 'app-example',
standalone: true,
imports: [AccordionComponent],
template: `
<flx-accordion
[title]="'Section Title'"
[expanded]="false"
(expandedChange)="onExpandedChange($event)">
<p>Your content goes here</p>
</flx-accordion>
`
})
export class ExampleComponent {
onExpandedChange(expanded: boolean) {
console.log('Accordion is now:', expanded ? 'expanded' : 'collapsed');
}
}
Component selector
<flx-accordion></flx-accordion>
Properties
The title displayed in the accordion header. This text is always visible, regardless of the expanded state.
Controls whether the accordion panel is expanded or collapsed. Use two-way binding with [(expanded)] for automatic state synchronization.
When true, prevents the accordion from being expanded or collapsed. The header will appear disabled.
Custom icon name to display in the accordion header. If not provided, uses the default chevron icon.
iconPosition
'start' | 'end'
default:"'end'"
Position of the expand/collapse icon relative to the title.
variant
'default' | 'outlined' | 'filled'
default:"'default'"
Visual style variant of the accordion.
Events
Emitted when the accordion’s expanded state changes. Returns true when expanded, false when collapsed.
Emitted when the accordion panel is opened.
Emitted when the accordion panel is closed.
Content projection
The Accordion component uses <ng-content> to project custom content into the panel body:
<flx-accordion [title]="'User Information'">
<!-- This content will be projected into the accordion body -->
<div class="user-details">
<p><strong>Name:</strong> John Doe</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Role:</strong> Administrator</p>
</div>
</flx-accordion>
Examples
Two-way binding
Multiple accordions
With custom icon
Nested content
Use two-way binding to synchronize the expanded state with a component property:@Component({
template: `
<flx-accordion
[title]="'Settings'"
[(expanded)]="isExpanded">
<div class="settings-content">
<label>
<input type="checkbox" [(ngModel)]="notifications" />
Enable notifications
</label>
</div>
</flx-accordion>
<button (click)="isExpanded = !isExpanded">
{{ isExpanded ? 'Collapse' : 'Expand' }} Settings
</button>
`
})
export class SettingsComponent {
isExpanded = false;
notifications = true;
}
Create an accordion group by using multiple accordion components:@Component({
template: `
<div class="accordion-group">
<flx-accordion
*ngFor="let section of sections"
[title]="section.title"
[expanded]="section.id === expandedSection"
(expandedChange)="onSectionToggle(section.id, $event)">
<div [innerHTML]="section.content"></div>
</flx-accordion>
</div>
`
})
export class FaqComponent {
expandedSection: string | null = null;
sections = [
{ id: 'faq1', title: 'How do I get started?', content: '...' },
{ id: 'faq2', title: 'What are the requirements?', content: '...' },
{ id: 'faq3', title: 'How do I deploy?', content: '...' }
];
onSectionToggle(sectionId: string, expanded: boolean) {
// Allow only one section to be expanded at a time
this.expandedSection = expanded ? sectionId : null;
}
}
Customize the accordion appearance with custom icons:<flx-accordion
[title]="'Advanced Options'"
[icon]="'settings'"
[iconPosition]="'start'"
[variant]="'outlined'">
<div class="advanced-settings">
<p>Configure advanced settings here</p>
</div>
</flx-accordion>
Project complex components and nested structures:@Component({
template: `
<flx-accordion [title]="'Order Details'" [expanded]="true">
<div class="order-summary">
<h4>Items ({{ items.length }})</h4>
<ul>
<li *ngFor="let item of items">
{{ item.name }} - {{ item.price | currency }}
</li>
</ul>
<flx-accordion [title]="'Shipping Information'">
<p>{{ shippingAddress }}</p>
</flx-accordion>
<div class="total">
<strong>Total:</strong> {{ total | currency }}
</div>
</div>
</flx-accordion>
`
})
export class OrderComponent {
items = [
{ name: 'Product A', price: 29.99 },
{ name: 'Product B', price: 49.99 }
];
shippingAddress = '123 Main St, City, State 12345';
get total() {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
When using multiple accordions, consider whether you want to allow multiple panels to be expanded simultaneously or enforce a single expanded panel at a time.
Accessibility
The Accordion component follows accessibility best practices:
- Uses proper ARIA attributes (
aria-expanded, aria-controls)
- Supports keyboard navigation (Space/Enter to toggle)
- Header is focusable and acts as a button
- Screen readers announce the expanded/collapsed state
Avoid nesting too many accordions within each other, as this can create a confusing user experience and make navigation difficult.
Styling
You can customize the accordion appearance using CSS custom properties:
flx-accordion {
--accordion-header-bg: #f5f5f5;
--accordion-header-hover-bg: #e0e0e0;
--accordion-border-color: #ddd;
--accordion-content-padding: 16px;
}
Common use cases
- FAQ sections: Display frequently asked questions with expandable answers
- Form sections: Organize long forms into logical, collapsible sections
- Settings panels: Group related settings and configurations
- Product details: Show additional product information on demand
- Documentation: Structure technical documentation into navigable sections