GET STARTED

Import

Use the concise canonical class names from the granular entry point. Import only the declarations your template uses.

import {
  NeuralAccordion,
  NeuralAccordionPanel,
  NeuralAccordionHeader,
  NeuralAccordionContent,
} from '@neural-ng/core/accordion';

@Component({
  imports: [
    NeuralAccordion,
    NeuralAccordionPanel,
    NeuralAccordionHeader,
    NeuralAccordionContent,
  ],
})

Data-driven FAQ

Property mappings turn immutable object arrays into concise text panels. Disabled items remain visible and cannot be expanded.

Projected composition

Panel, header and content declarations accept arbitrary Angular content. Do not combine projected panels with a non-empty data array.

Multiple panels

In multiple mode the controlled value is an array and each enabled panel toggles independently.

Non-collapsible single mode

Set collapsible=false when one single-mode panel must always remain expanded. It has no effect in multiple mode.

Disabled group and panel

Disable the entire group or only one projected panel. Disabled headers use native button state and keyboard navigation skips them.

Controlled model and semantic event

valueChange powers two-way binding. panelChange adds panel identity, expanded state, previous/next model and keyboard or pointer source.

panelChanged(event: NeuralAccordionPanelChange): void {
  console.log(event.panelValue, event.expanded);
  console.log(event.previousValue, event.value, event.source);
}

Unstyled and typed slots

Unstyled mode preserves disclosure semantics, inert collapsed content, focus movement and structural hooks while Tailwind owns every visible class.

Resolution rules and intentional boundaries

Semantics and relationships

Headers expose aria-expanded and aria-controls. Content regions use aria-labelledby; collapsed content is both aria-hidden and inert.

Keyboard

Enter and Space use native button activation. Arrow Down/Up wrap between enabled headers. Home and End focus the first and last enabled header.

Focus

Toggling content never steals focus. Disabled headers leave navigation and deterministic SSR-safe IDs preserve relationships through hydration.

Motion

Content and chevron transitions use component tokens and collapse to effectively immediate changes under prefers-reduced-motion.

Accordion inputs

Outputs

Panel API

Header and content API

Typed class slots