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

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

QuickstartAvatar