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.