NEURALNG
CONTENTBETA

Accordion

Data-driven or fully composable disclosure groups with controlled Signals state, deterministic ARIA relationships and complete visual ownership.

Native buttonsSSR safeHeadless ready

GET STARTED

Import

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

app.ts TypeScript 
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.

The controlled value remains deterministic for humans, agents and SSR.

No panel event yet.

Projected composition

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

Controlled stateThe model can be shared with routes, stores and generated interfaces.

Multiple panels

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

Standalone declarations and Signals state.

Non-collapsible single mode

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

Clicking the active header cannot collapse the final open panel.

Disabled group and panel

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

Disabled panel

Disabled group

Controlled model and semantic event

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

events.ts TypeScript 
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.

NeuralNg owns behavior; consumer classes own presentation.

Resolution rules and intentional boundaries

Data content is escaped plain text. itemValue must resolve to a unique string or number; invalid values fall back to the stable render index and duplicate values produce a development warning.

Use either [items] or projected panels. When both are present, data items are authoritative and development mode reports the mixed source.

Local unstyled and application-wide provideNeuralNg({ unstyled: true }) preserve the same structural, keyboard and ARIA contract. Programmatic model writes update expansion without emitting the user-only panelChange.

Remote loading, errors and rich content belong inside projected panels. The Beta contract does not pretend to lazy-instantiate collapsed templates; a future lazy API will require an explicit lifecycle contract.