Primitives

Accordion

Display a series of panels that can be expanded or collapsed.

If you would like to learn more please reach out to us on GitHub.
Yes, this is open source and you can use it in your project.

Import

Import the Accordion primitives from ng-primitives/accordion.

import {
  NgpAccordion,
  NgpAccordionItem,
  NgpAccordionTrigger,
  NgpAccordionContent,
} from 'ng-primitives/accordion';

Usage

Assemble the accordion directives in your template.

<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
  <div ngpAccordionItem ngpAccordionItemValue="item-1">
    <button ngpAccordionTrigger ngpButton>Would you like to learn more?</button>
    <div ngpAccordionContent>If you would like to learn more please reach out to us on GitHub.</div>
  </div>

  <div ngpAccordionItem ngpAccordionItemValue="item-2">
    <button ngpAccordionTrigger ngpButton>Can I use this in my project?</button>
    <div ngpAccordionContent>Yes, this is open source and you can use it in your project.</div>
  </div>
</div>

Reusable Component

Create reusable components that uses the NgpAccordion and NgpAccordionItem directives.

import { Component } from '@angular/core';
import { Accordion } from './accordion';
import { AccordionItem } from './accordion-item';

@Component({
  selector: 'app-root',
  imports: [Accordion, AccordionItem],
  template: `
    <app-accordion>
      <app-accordion-item heading="Accordion 1" value="accordion-item-1">
        <p>Accordion item 1</p>
      </app-accordion-item>
      <app-accordion-item heading="Accordion 2" value="accordion-item-2">
        <p>Accordion item 2</p>
      </app-accordion-item>
      <app-accordion-item heading="Accordion 3" value="accordion-item-3">
        <p>Accordion item 3</p>
      </app-accordion-item>
    </app-accordion>
  `,
})
export default class App {}

Schematics

Generate a reusable accordion component using the Angular CLI.

ng g ng-primitives:primitive accordion

Options

  • path: The path at which to create the component file.
  • prefix: The prefix to apply to the generated component selector.
  • componentSuffix: The suffix to apply to the generated component class name.
  • fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
  • exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/accordion package:

NgpAccordion

Apply the `ngpAccordion` directive to an element that represents the group of accordion items.

  • Selector: [ngpAccordion]
  • Exported As: ngpAccordion
ngpAccordionType
NgpAccordionType

The type of the accordion.

ngpAccordionCollapsible
boolean

Whether the accordion is collapsible.

ngpAccordionValue
T | T[] | null

The value of the accordion.

ngpAccordionDisabled
boolean

Whether the accordion is disabled.

ngpAccordionOrientation
NgpOrientation

The accordion orientation.

ngpAccordionValueChange
T | T[] | null

Event emitted when the accordion value changes.

Data Attributes

The following data attributes are applied to the ngpAccordion directive:

Attribute Description Value
data-orientation The orientation of the accordion. horizontal | vertical
data-disabled Applied when the element is disabled. -

NgpAccordionItem

Apply the `ngpAccordionItem` directive to an element that represents an accordion item.

  • Selector: [ngpAccordionItem]
  • Exported As: ngpAccordionItem
ngpAccordionItemValue
T | undefined

The value of the accordion item.

ngpAccordionItemDisabled
boolean

Whether the accordion item is disabled.

Data Attributes

The following data attributes are applied to the ngpAccordionItem directive:

Attribute Description Value
data-orientation The orientation of the accordion. horizontal | vertical
data-open Applied when the accordion item is open. -
data-disabled Applied when the accordion item is disabled. -

NgpAccordionTrigger

Apply the `ngpAccordionTrigger` directive to an element that represents the trigger for an accordion item, such as a button.

  • Selector: [ngpAccordionTrigger]
  • Exported As: ngpAccordionTrigger

Data Attributes

The following data attributes are applied to the ngpAccordionTrigger directive:

Attribute Description Value
data-orientation The orientation of the accordion. horizontal | vertical
data-open Applied when the accordion item is open. -
data-disabled Applied when the accordion item is disabled. -

NgpAccordionContent

Apply the `ngpAccordionContent` directive to an element that represents the content of an accordion item.

  • Selector: [ngpAccordionContent]
  • Exported As: ngpAccordionContent

Data Attributes

The following data attributes are applied to the ngpAccordionContent directive:

Attribute Description Value
data-orientation The orientation of the accordion. horizontal | vertical
data-open Applied when the accordion item is open. -

The following CSS custom properties are applied to the ngpAccordionContent directive:

Property Description
--ngp-accordion-content-width The width of the accordion content.
--ngp-accordion-content-height The height of the accordion content.

Animations

The ngpAccordionContent primitive adds several CSS custom properties --ngp-accordion-content-width and --ngp-accordion-content-height to the element that can be used to animate the accordion content on open and close.

Global Configuration

You can configure the default options for all accordions in your application by using the provideAccordionConfig function in a providers array.

import { provideAccordionConfig } from 'ng-primitives/accordion';

bootstrapApplication(AppComponent, {
  providers: [
    provideAccordionConfig({
      type: 'multiple',
      collapsible: true,
      orientation: 'horizontal',
    }),
  ],
});

NgpAccordionConfig

type
single | multiple

Define whether only one or multiple accordion items can be open at a time.

collapsible
boolean

Define an accordion can be collapsed. This is only applicable when `type` is set to `single`.

orientation
horizontal | vertical

Define the orientation of the accordion.

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Keyboard Interactions

  • Space - Toggle the expanded state of the accordion item when the trigger is focused.
  • Enter - Toggle the expanded state of the accordion item when the trigger is focused.

Copyright © 2025 Angular Primitives