@andreagrossetti/ngx-accordion NPM

NgxAccordion

I've build this angular accordion because other accordions were outdated or could not expand accordion group's inner elements as well as accordion groups.

Demo

https://stackblitz.com/edit/ngx-accordion

Changes from version 0.1.x

ngx-accordion-element has been renamed to ngx-accordion-group-child.
Added ngx-accordion-group-header to be able to use anchor link as group title.
startActive option has been removed
added active option to be able to set accordion group and accordion group child active state.

Installation

yarn add @andreagrossetti/ngx-accordion

Setup

import { AccordionModule } from '@andreagrossetti/ngx-accordion';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    AccordionModule // ngx-accordion added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}

Use

Open demo for more examples

<ngx-accordion>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faAppleAlt"></fa-icon> Fruits
    </ngx-accordion-group-element>
    <ngx-accordion-group-child> Banana</ngx-accordion-group-child>
    <ngx-accordion-group-child> Orange</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group [active]="true">
    <ngx-accordion-group-element>
      <fa-icon [icon]="faCarrot"></fa-icon> Vegetables
    </ngx-accordion-group-element>
    <ngx-accordion-group-child>Carrot</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faCookie"></fa-icon> Cookies
    </ngx-accordion-group-element>
    <ngx-accordion-group-child>Butter cookie</ngx-accordion-group-child>
    <ngx-accordion-group-child>Macaron</ngx-accordion-group-child>
  </ngx-accordion-group>
  <ngx-accordion-group>
    <ngx-accordion-group-element>
      <fa-icon [icon]="faBook"></fa-icon> Books
    </ngx-accordion-group-element>
  </ngx-accordion-group>
</ngx-accordion>

Options

AccordionGroup options

Option	Type	Default	Description
active	boolean	false	Initial status of Accordion Group
showGroupExpandedSymbol	boolean	true	Show + or - symbol if group is expanded.
handleStateManually	boolean	false	handle active state manually (needed for anchor links)