syncfusion-angular-accordion

Implementing Syncfusion Angular Accordion Component

When to Use This Skill

Use this skill when you need to:

Create collapsible content panels - Organize related content into expandable sections that collapse to save space
Build step-by-step wizards - Create multi-step forms or workflows where users progress through accordion items
Implement FAQ sections - Display frequently asked questions with expandable answers
Create navigation menus - Build hierarchical menus or navigation structures with nested expandable items
Load content dynamically - Fetch and display content on-demand as users expand accordion items
Add custom animations - Enhance user experience with smooth expand/collapse transitions
Organize complex data - Display structured data with expandable categories and subcategories

Component Overview

The Syncfusion Angular Accordion component displays a vertically collapsible content panel where users can expand one or more sections at a time. Key capabilities include:

Single/Multiple expand modes - Control whether one or multiple items can be open simultaneously
Data binding - Bind accordion items from arrays or OData services
Dynamic item management - Add, remove, or update items at runtime
Event handling - Respond to expand, collapse, and click events
Custom animations - Configure smooth transitions with custom effects and duration
Nested accordions - Create hierarchical accordion structures for complex navigation
TreeView integration - Embed other components like TreeView for advanced navigation
Content projection - Use Angular's ng-content for reusable content components

Master Table of Contents

Quick Navigation to Documentation:

Getting Started - Installation, setup, and basic initialization
Expand Modes - Single vs. Multiple expand modes, configuration
Data Binding - Data sources, OData, REST APIs, refresh strategies
Dynamic Loading and Interactions - Events, methods, dynamic item management
Advanced Features - Animations, nested accordions, styling, RTL
Use Cases and Patterns - Real-world implementations and patterns

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When to use:

Setting up your first Accordion component
Installing required packages and dependencies
Understanding CSS imports and theme configuration
Learning basic initialization methods (template-based, items array, HTML elements)
Creating your first working example

Expand Modes

📄 Read: references/expand-modes.md

When to use:

Deciding whether users should expand one or multiple items
Configuring single mode (only one item open at a time)
Using multiple mode for simultaneously open items
Selecting the right mode for your use case
Handling performance with large datasets

Data Binding

📄 Read: references/data-binding.md

When to use:

Binding accordion data from external sources
Using DataManager to fetch from OData services
Mapping data properties to headers and content
Working with structured data arrays
Refreshing accordion content after data updates

Dynamic Loading and Interactions

📄 Read: references/dynamic-loading-and-interactions.md

When to use:

Adding items dynamically at runtime
Handling expand/collapse/click events
Loading content via AJAX or remote requests
Implementing checkbox-controlled expansion
Preventing item collapse or forcing items to stay open
Using ng-content for reusable content components
Creating always-open accordion items

Advanced Features

📄 Read: references/advanced-features.md

When to use:

Customizing expand/collapse animations with effects and easing
Creating nested accordions for hierarchical structures
Integrating TreeView components within accordion items
Applying custom CSS styling and theming
Enabling RTL (right-to-left) support
Styling headers, items, and expand/collapse icons

Use Cases and Patterns

📄 Read: references/use-cases-patterns.md

When to use:

Building FAQ sections with best practices
Creating multi-step wizard forms with validation
Designing settings panels with categories
Building navigation menus and organizational hierarchies
Displaying help and documentation sections
Learning real-world patterns and code organization strategies

Quick Start Example

Basic template-based accordion with three items:

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded="true">
          <ng-template #header>
            <div>ASP.NET</div>
          </ng-template>
          <ng-template #content>
            <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>ASP.NET MVC</div>
          </ng-template>
          <ng-template #content>
            <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>JavaScript</div>
          </ng-template>
          <ng-template #content>
            <div>JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages and applications.</div>
          </ng-template>
        </e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  `
})
export class AppComponent {}

Using items array approach:

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `<ejs-accordion [items]="accordionItems"></ejs-accordion>`
})
export class AppComponent {
  public accordionItems = [
    {
      header: 'ASP.NET',
      content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications.',
      expanded: true
    },
    {
      header: 'ASP.NET MVC',
      content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components.'
    },
    {
      header: 'JavaScript',
      content: 'JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages.'
    }
  ];
}

Common Patterns

Pattern 1: Single Expand Mode (One Item Open)

Use when you want only one accordion item open at a time, common for navigation menus and settings panels.

<ejs-accordion expandMode="Single">
  <!-- items here -->
</ejs-accordion>

Pattern 2: Dynamic Item Addition

Add items programmatically in response to user actions or data loading.

@ViewChild('accordion') accordionObj?: AccordionComponent;

addNewItem() {
  this.accordionObj?.addItem({
    header: 'New Item',
    content: 'New content here'
  });
}

Pattern 3: Event-Driven Workflows

Respond to accordion events for custom logic like validation or data loading.

<ejs-accordion (expanding)="onExpanding($event)" (expanded)="onExpanded($event)">
  <!-- items here -->
</ejs-accordion>

onExpanding(event: ExpandEventArgs) {
  // Prevent collapse of currently open item
  event.cancel = true;
}

Pattern 4: Animated Expand/Collapse

Add smooth animations for better visual feedback.

<ejs-accordion [animation]="animationSettings">
  <!-- items here -->
</ejs-accordion>

animationSettings = {
  expand: { effect: 'SlideDown', duration: 400, easing: 'ease' },
  collapse: { effect: 'SlideUp', duration: 400, easing: 'ease' }
};

Complete API Reference

For detailed documentation on each API element with working code examples, refer to the reference files. Below is a comprehensive summary.

Accordion Component Properties (13 Total)

Property	Type	Default	Purpose	Learn More
`items`	`AccordionItemModel[]`	`[]`	Collection of accordion items	Data Binding
`dataSource`	`DataManager \| Object[]`	`null`	Data source for binding items	Data Binding
`expandMode`	`'Single' \| 'Multiple'`	`'Multiple'`	Controls single or multiple item expansion	Expand Modes
`expandedIndices`	`number[]`	`[]`	Indices of initially expanded items	Expand Modes
`animation`	`AccordionAnimationSettingsModel`	`{ expand: { effect: 'SlideDown', duration: 400, easing: 'linear' }, collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' } }`	Expand/collapse animation settings	Advanced Features
`headerTemplate`	`string \| Function`	`null`	Template for item headers	Getting Started
`itemTemplate`	`string \| Function`	`null`	Template for item content	Getting Started
`height`	`string \| number`	`auto`	Component height	Getting Started
`width`	`string \| number`	`100%`	Component width	Getting Started
`enableRtl`	`boolean`	`false`	Enable right-to-left layout	Advanced Features
`enablePersistence`	`boolean`	`false`	Save expanded state in localStorage	Getting Started
`enableHtmlSanitizer`	`boolean`	`true`	Sanitize HTML in content	Data Binding
`locale`	`string`	`'en-US'`	Localization culture	Advanced Features

AccordionItem Properties (8 Total)

Property	Type	Default	Purpose	Learn More
`header`	`string \| HTMLElement`	`''`	Item header text or element	Getting Started
`content`	`string \| HTMLElement \| Function`	`''`	Item content text, HTML, or function	Getting Started
`expanded`	`boolean`	`false`	Initial expanded state	Expand Modes
`disabled`	`boolean`	`false`	Disable item interaction	Dynamic Loading
`visible`	`boolean`	`true`	Item visibility	Dynamic Loading
`cssClass`	`string`	`''`	Custom CSS class for item	Advanced Features
`iconCss`	`string`	`''`	Font Awesome/Bootstrap icon class	Getting Started
`id`	`string`	`''`	Unique item identifier	Getting Started

Methods (7 Total)

Method	Signature	Purpose	Learn More
`addItem()`	`addItem(item: AccordionItemModel \| Object[], index?: number): void`	Add items at specific index or end	Dynamic Loading
`removeItem()`	`removeItem(index: number): void`	Remove item at index	Dynamic Loading
`expandItem()`	`expandItem(isExpand: boolean, index?: number): void`	Expand/collapse specific or all items	Dynamic Loading, Expand Modes
`enableItem()`	`enableItem(index: number, isEnable: boolean): void`	Enable/disable item interaction	Dynamic Loading
`hideItem()`	`hideItem(index: number, isHidden?: boolean): void`	Show/hide item without removal	Dynamic Loading
`select()`	`select(index: number): void`	Set focus to item header	Dynamic Loading
`destroy()`	`destroy(): void`	Clean up component resources	Dynamic Loading

Events (5 Total)

Event	Event Args	Triggered When	Learn More
`created`	`Event`	Component rendering completes	Dynamic Loading
`expanding`	`ExpandEventArgs`	Item begins to expand (cancellable)	Dynamic Loading
`expanded`	`ExpandEventArgs`	Item finishes expanding	Dynamic Loading
`clicked`	`AccordionClickArgs`	Header or content clicked	Dynamic Loading
`destroyed`	`Event`	Component destroyed	Dynamic Loading

Animation Effects (6 Types)

Effect	Expand Behavior	Collapse Behavior	Best For
`SlideDown`	Content slides down	N/A (use with SlideUp)	Default, smooth animations
`SlideUp`	N/A (use with SlideDown)	Content slides up	Default collapse effect
`FadeDown`	Content fades in while sliding	N/A (use with FadeUp)	Professional appearance
`FadeUp`	N/A (use with FadeDown)	Content fades out while sliding	Professional appearance
`Zoom`	Content zooms in	Content zooms out	Attention-grabbing effects
`None`	Instant	Instant	Best performance

Easing Functions (5 Types)

Easing	Curve	Best For	Typical Use
`linear`	Constant speed	Simple animations	Straightforward expand/collapse
`ease`	Slow start/end, fast middle	Default behavior	Balanced feel
`ease-in`	Accelerating	Collapse action	Speeds up as it closes
`ease-out`	Decelerating	Expand action	Slows down as it opens
`ease-in-out`	Slow start and end	Symmetric animations	Equal timing both directions

Common Use Cases

FAQ Section - Expandable question/answer pairs with single expand mode
Multi-Step Wizard - Sequential items with validation and conditional enabling
Settings Panel - Grouped settings organized in expandable sections
Navigation Menu - Hierarchical navigation with nested accordions
Data Explorer - Expandable data categories with dynamic loading
Help Documentation - Collapsible help sections organized by topic

Troubleshooting Quick Reference

Item won't expand?

Check if item is disabled with enableItem(false, index)
Verify expandMode setting matches your requirement

Content not loading?

Ensure header and content properties are set
Check CSS imports are included in styles

Animation not smooth?

Verify CSS is properly imported
Check browser console for errors
Consider reducing animation duration for slower devices

Multiple items closing unexpectedly?

Verify expandMode is set to 'Multiple' if multiple should be open
Check event handlers aren't calling e.cancel = true

For detailed information on any aspect, refer to the documentation and navigation guide above. Start with getting-started.md if you're new to the component.

About this skill

When to Use This Skill

Component Overview

Master Table of Contents

Documentation and Navigation Guide

Getting Started

Expand Modes

Data Binding

Dynamic Loading and Interactions

Advanced Features

Use Cases and Patterns

Quick Start Example

Common Patterns

Pattern 1: Single Expand Mode (One Item Open)

Pattern 2: Dynamic Item Addition

Pattern 3: Event-Driven Workflows

Pattern 4: Animated Expand/Collapse

Complete API Reference

Accordion Component Properties (13 Total)

AccordionItem Properties (8 Total)

Methods (7 Total)

Events (5 Total)

Animation Effects (6 Types)

Easing Functions (5 Types)

Common Use Cases

Troubleshooting Quick Reference