Skip to main content

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