Ng-dynamic-accordion NPM

Angular-dynamic-Accordion

Angular dynamic accordion for web applications. Easy to integrate and use. It contains nested section.

Getting Started

Features

Accordion user array for content show.
array contain heading, descriptions & nested section heading/descriptions.
array also contain key for default open section & disabling the particular section key.
Object that contains multiple feature like heading key & description key.
you can also add CSS class by passing in object.

Installation

npm i ng-dynamic-accordion

```ts
import { AccordionModule } from 'ng-dynamic-accordion';
// ...

@NgModule({
  imports: [
    AccordionModule
    // ...
  ]
  // ...
})
export class AppModule {}

Usage

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  userArray: any[] = [];
  options: object;
  
  ngOnInit () {
    this.userArray = [
      {
        heading: 'section 1 heading', desc: 'section 1 body', isDisable: false, isOpen: true,
        group: [{ subHeading: 'subSection 1 Heading', isOpen: true, subDesc: 'subSection 1 body' }]
      },
      {
        heading: 'section 2 heading', desc: 'section 2 body', isDisable: false, isOpen: false,
        group: [{ subHeading: 'subSection 2 Heading', isOpen: false, subDesc: 'subSection 2 body' }]
      },
      {
        heading: 'section 3 heading', desc: 'section 3 body', isDisable: false, isOpen: false,
        group: [{ subHeading: 'subSection 3 Heading', isOpen: false, subDesc: 'subSection 3 body' }]
      },
      {
        heading: 'section 4 heading', desc: 'section 4 body', isDisable: false, isOpen: false,
        group: [
          { subHeading: 'subSection 4.2 Heading', isOpen: false, subDesc: 'subSection 4.1 body' },
          { subHeading: 'subSection 4.2 Heading', isOpen: false, subDesc: 'subSection 4.2 body' }
        ]
      },
      {
        heading: 'section 5 heading', desc: 'section 5 body', isDisable: false, isOpen: false,
        group: [{ subHeading: 'subSection 5 subHeading', isOpen: false, subDesc: 'subSection 5 body' }]
      },
    ];
  
  this.options = {

      textKeyHeading: 'heading', // Accordion heading key of the array, you can take anything.
      textKeyDesc: 'desc',       // Accordion description key of the array, you can take anything.
      textKeysubHeading: 'subHeading', // Accordion nested section heading key of the array, you can take anything.
      textKeysubDesc: 'subDesc',     // Accordion nested section description key of the array, you can take anything.
      addCssClass: '',         // For adding CSS class in accordion.
      array: this.userArray   // Array of accordion.
    };

  }
}

<ng-dynamic-accordion [option] = options ></ng-dynamic-accordion>

options

options	Type	Description	Default Value
heading	String	Heading of outer section accordion.	'section heading'
desc	String	Description of outer section accordion.	'section body'
subHeading	String	Heading of inner section accordion	'subSection Heading'
subDesc	String	description of inner section accordion.	'subSection body'
textKeyHeading	String	Heading Key of outer section accordion.	'heading'
array	Array	This is User Array	userArray
textKeyDesc	String	description Key of outer section accordion	'desc'
addCssClass	String	add Css class on accordion section	''
textKeysubHeading	String	Heading Key of inner section accordion of user array	'subHeading'
textKeysubDesc	String	description Key of inner section accordion of user array	'subDesc'
isOpen	boolean	for default section open of accordion if true.	true
isDisable	boolean	for disabling particular section of accordion if pass true	false