How to Create Accordion in Angular: Simple Step-by-Step Guide

To create an accordion in Angular, build a component that toggles the visibility of content sections using a boolean state and Angular's *ngIf or [hidden] directive. Use click events to open or close each section, ensuring only one or multiple panels can expand as needed.

Syntax

An accordion in Angular typically uses a component with a boolean variable to track if a section is open. The (click) event toggles this variable, and *ngIf or [hidden] controls the content visibility.

Key parts:

• (click): listens for user clicks to toggle state.
• *ngIf: conditionally renders content when true.
• Boolean variable: stores open/closed state.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion',
  template: `
    <div (click)="isOpen = !isOpen" style="cursor:pointer;">
      <h3>Section Title</h3>
    </div>
    <div *ngIf="isOpen">
      <p>Content shown when open.</p>
    </div>
  `
})
export class AccordionComponent {
  isOpen = false;
}

Output

A clickable section title that toggles showing or hiding the content below it.

Example

This example shows a simple accordion with two sections. Clicking a section title toggles its content. Multiple sections can be open at once.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion',
  template: `
    <div *ngFor="let section of sections; let i = index">
      <div (click)="toggle(i)" style="cursor:pointer; background:#eee; padding:10px; margin-top:5px;">
        <strong>{{ section.title }}</strong>
      </div>
      <div *ngIf="section.open" style="padding:10px; border:1px solid #ccc;">
        {{ section.content }}
      </div>
    </div>
  `
})
export class AccordionComponent {
  sections = [
    { title: 'Section 1', content: 'Content for section 1', open: false },
    { title: 'Section 2', content: 'Content for section 2', open: false }
  ];

  toggle(index: number) {
    this.sections[index].open = !this.sections[index].open;
  }
}

Output

Two section titles stacked vertically; clicking each toggles showing its content below.

Common Pitfalls

Common mistakes when creating accordions in Angular include:

• Not toggling the boolean state correctly, causing sections to never open or close.
• Using *ngIf without a stable key in *ngFor, which can cause unexpected re-rendering.
• Forgetting to add cursor: pointer style on clickable headers, which hurts usability.
• Not managing accessibility attributes like aria-expanded and keyboard navigation.

typescript

/* Wrong: toggling a local variable inside template only (won't persist state) */
// Template snippet:
// <div (click)="isOpen = !isOpen">Title</div>
// <div *ngIf="isOpen">Content</div>

/* Right: toggling a component property to keep state */
// In component:
// isOpen = false;
// toggle() { this.isOpen = !this.isOpen; }
// Template:
// <div (click)="toggle()">Title</div>
// <div *ngIf="isOpen">Content</div>

Quick Reference

Tips for building Angular accordions:

• Use a boolean property per section to track open state.
• Toggle state with a click event handler.
• Use *ngIf or [hidden] to show/hide content.
• Style headers with cursor: pointer for clarity.
• Consider accessibility with ARIA roles and keyboard support.

Key Takeaways

Use a boolean variable and Angular's *ngIf to toggle accordion content visibility.

Handle click events to change the open/closed state of each accordion section.

Ensure each section's state is stored in the component to persist toggling.

Add pointer cursor style on clickable headers for better user experience.

Remember accessibility by adding ARIA attributes and keyboard navigation.