Accordion

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

Usage

Assemble the accordion directives in your template.

<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
  <div ngpAccordionItem ngpAccordionItemValue="item-1">
    <button ngpAccordionTrigger>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>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>

API Reference

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

NgpAccordionDirective

ngpAccordionType · single | multiple · default: "single"

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

ngpAccordionCollapsible · boolean · default: "false"

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

ngpAccordionValue · T | T[]

Define the expanded accordion items. This should be a single value when ngpAccordionType is set to single and an array when set to multiple.

ngpAccordionDisabled · boolean · default: "false"

Define whether the accordion is disabled.

ngpAccordionOrientation · horizontal | vertical · default: "vertical"

Define the orientation of the accordion.

ngpAccordionValueChange · T | T[]

Emitted when the expanded accordion items change. This will be a single value when ngpAccordionType is set to single and an array when set to multiple.

NgpAccordionItemDirective

ngpAccordionItemValue · T · required

Define the value of the accordion item.

ngpAccordionItemDisabled · boolean · default: "false"

Define whether the accordion item is disabled.

NgpAccordionTriggerDirective

There are no inputs or outputs for this directive.

NgpAccordionContentDirective

There are no inputs or outputs for this 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/ng-primitives/accordion';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgpAccordionConfig({
      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.

Schematics

You can use our schematic to generate a new accordion component.

Angular CLI

ng generate @ng-primitives/ng-primitives:accordion

Options

name · string

The name of the component.

project · string

The name of the project to add the component to.

path · string

The path to create the component.