ngs-accordion

A lightweight, accessible, and fully standalone Angular accordion component built with Angular Signals.

Features

• ✅ Angular Standalone Components
• ✅ Signal-based state management
• ✅ Single or multiple panel expansion
• ✅ Nested accordions support
• ✅ Custom header templates
• ✅ Custom content templates
• ✅ Accessible (ARIA support)
• ✅ CSS Custom Properties for theming
• ✅ OnPush change detection

Installation

npm install ngs-accordion

Import

import {
  NgsAccordionGroup,
  NgsAccordionPanel,
  AccordionHeader,
  AccordionContent
} from 'ngs-accordion';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    NgsAccordionGroup,
    NgsAccordionPanel,
    AccordionHeader,
    AccordionContent
  ],
  templateUrl: './app.html',
})
export class App {}

Basic Usage

<ngs-accordion-group [multi]="true">
  <ngs-accordion-panel title="Section 1">
    <ng-template accordionContent>
      Content for section 1
    </ng-template>
  </ngs-accordion-panel>

  <ngs-accordion-panel title="Section 2">
    <ng-template accordionContent>
      Content for section 2
    </ng-template>
  </ngs-accordion-panel>
</ngs-accordion-group>

Custom Header Template

Use accordionHeader to fully customize the header content.

<ngs-accordion-panel title="Fallback Title">
  <ng-template accordionHeader>
    <strong>🚀 Custom Header</strong>
  </ng-template>

  <ng-template accordionContent>
    Custom content
  </ng-template>
</ngs-accordion-panel>

If a custom header template is provided, the title input becomes optional.

Nested Accordions

Nested accordions are fully supported.

<ngs-accordion-group [multi]="false">
  <ngs-accordion-panel title="Parent">
    <ng-template accordionContent>

      <ngs-accordion-group [multi]="true">
        <ngs-accordion-panel title="Child 1">
          <ng-template accordionContent>
            Child content 1
          </ng-template>
        </ngs-accordion-panel>

        <ngs-accordion-panel title="Child 2">
          <ng-template accordionContent>
            Child content 2
          </ng-template>
        </ngs-accordion-panel>
      </ngs-accordion-group>

    </ng-template>
  </ngs-accordion-panel>
</ngs-accordion-group>

Group Configuration

multi

Controls whether multiple panels can remain open simultaneously.

| Input | Type | Default | |---------|------|---------| | multi | boolean | false |

Single Expansion

<ngs-accordion-group [multi]="false">

Only one panel can be open at a time.

Multiple Expansion

<ngs-accordion-group [multi]="true">

Multiple panels can remain open simultaneously.

Panel Inputs

title

Header text displayed when no custom header template is supplied.

<ngs-accordion-panel title="Settings">

cssClass

Apply additional CSS classes to the accordion root.

<ngs-accordion-panel
  title="Settings"
  cssClass="my-custom-panel">
</ngs-accordion-panel>

| Input | Type | Default | |---------|------|---------| | title | string | undefined | | cssClass | string | '' |

Styling

The component exposes CSS variables for easy customization.

ngs-accordion-panel {
  --ngs-accordion-bg: #111827;
  --ngs-accordion-header-bg: #1f2937;
  --ngs-accordion-header-text: #f9fafb;
  --ngs-accordion-content-text: #d1d5db;
  --ngs-accordion-border: 1px solid #374151;
  --ngs-accordion-radius: 0.5rem;
  --ngs-accordion-padding: 0.75rem 1rem;
  --ngs-accordion-text: #f3f4f6;
  --ngs-accordion-text-muted: #9ca3af;
  --ngs-accordion-icon-color: #9ca3af;
  --ngs-accordion-hover-bg: #374151;
  --ngs-accordion-focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.5);
  --ngs-accordion-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

Accessibility

The accordion includes:

• ARIA-expanded state management
• ARIA controls relationships
• Keyboard support
  • Enter
  • Space
• Region roles for content panels

Requirements

| Package | Version | |----------|----------| | Angular | 19+ | | TypeScript | 5+ |

Example

<ngs-accordion-group [multi]="true">
  <ngs-accordion-panel title="Getting Started">
    <ng-template accordionContent>
      Welcome to ngs-accordion.
    </ng-template>
  </ngs-accordion-panel>

  <ngs-accordion-panel title="Advanced">
    <ng-template accordionHeader>
      ⚡ Advanced Settings
    </ng-template>

    <ng-template accordionContent>
      Configure advanced options here.
    </ng-template>
  </ngs-accordion-panel>
</ngs-accordion-group>

License

MIT License

Contributing

Issues and pull requests are welcome.

Built with ❤️ for Angular developers.