syncfusion-angular-accordion

What this skill does

# 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:**
1. [Getting Started](references/getting-started.md) - Installation, setup, and basic initialization
2. [Expand Modes](references/expand-modes.md) - Single vs. Multiple expand modes, configuration
3. [Data Binding](references/data-binding.md) - Data sources, OData, REST APIs, refresh strategies
4. [Dynamic Loading and Interactions](references/dynamic-loading-and-interactions.md) - Events, methods, dynamic item management
5. [Advanced Features](references/advanced-features.md) - Animations, nested accordions, styling, RTL
6. [Use Cases and Patterns](references/use-cases-patterns.md) - Real-world implementations and patterns

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](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](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](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](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](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](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:**

```typescript
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:**

```typescript
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.

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

### Pattern 2: Dynamic Item Addition
Add items programmatically in response to user actions or data loading.

```typescript
@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.