Accordion

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

<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
  <div
    #panel1="ngpAccordionItem"
    ngpAccordionItem
    ngpAccordionItemValue="item-1"
  >
    <button ngpAccordionTrigger ngpButton>
      Would you like to learn more?

      <ng-icon [attr.data-open]="panel1.open()" name="heroChevronDownMini" />
    </button>
    <div ngpAccordionContent>
      <div class="accordion-content">
        If you would like to learn more please reach out to us on GitHub.
      </div>
    </div>
  </div>

  <div
    #panel2="ngpAccordionItem"
    ngpAccordionItem
    ngpAccordionItemValue="item-2"
  >
    <button ngpAccordionTrigger ngpButton>
      Can I use this in my project?

      <ng-icon [attr.data-open]="panel2.open()" name="heroChevronDownMini" />
    </button>
    <div ngpAccordionContent>
      <div class="accordion-content">
        Yes, this is open source and you can use it in your project.
      </div>
    </div>
  </div>
</div>

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>

Schematics

Generate an accordion component with the NgpAccordion and NgpAccordionItem primitives preconfigured.

ng g ng-primitives:accordion

Options

• name: The name of the component.
• prefix: The prefix to apply to the generated component selector.
• directory: The directory at which to create the component file.
• style: The file extension or preprocessor to use for style files.
• inlineStyle: Include styles inline in the component.ts file. Only CSS styles can be included inline.
• inlineTemplate: Include template inline in the component.ts file

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

Data Attributes

The following data attributes are applied to the ngpAccordion directive:

NgpAccordionItem

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

• Selector: [ngpAccordionItem]
• Exported As: ngpAccordionItem

Data Attributes

The following data attributes are applied to the ngpAccordionItem directive:

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
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

Data Attributes

The following data attributes are applied to the ngpAccordionTrigger directive:

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:

Global Configuration

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

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

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

NgpAccordionConfig

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.