Primitives

Accordion

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

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">
    <h3>
      <button ngpAccordionTrigger ngpButton>Would you like to learn more?</button>
    </h3>
    <div ngpAccordionContent>If you would like to learn more please reach out to us on GitHub.</div>
  </div>

  <div ngpAccordionItem ngpAccordionItemValue="item-2">
    <h3>
      <button ngpAccordionTrigger ngpButton>Can I use this in my project?</button>
    </h3>
    <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.

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.
component-suffix: The suffix to apply to the generated component class name.
file-suffix: The suffix to apply to the generated component file name. Defaults to component.
example-styles: 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

NgpAccordionItem

NgpAccordionTrigger

NgpAccordionContent

Animations

The ngpAccordionContent primitive sets --ngp-accordion-content-width and --ngp-accordion-content-height CSS custom properties on the element. Use these with the data-enter and data-exit attributes to animate open and close. These attributes are only set on user interaction — not on initial render — so no animation plays on page load.

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

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Tip: Per APG, wrap each trigger button in a heading element (e.g., h3) or an element with role="heading" and an appropriate aria-level. Ensure the button is the only child of the heading.

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.

Hidden Until Found

The ngpAccordionContent primitive uses the until-found attribute to allow the browser to search text within the hidden region and reveal the section if a match is found. If the browser does not support this functionality, the attribute is ignored.

More information about the until-found attribute can be found on Can I use.

Getting Started