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 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

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