Accordion Directive

Utilizing @ng-bootstrap's collapse directive, it wraps multiple ngbCollapse directives to form an accordion.

There are three directives:

NgAceAccordion: Accordion element that wraps multiple .card elements
NgAceAccordionToggle: The accordion toggler
NgAceAccordionCard: The accordion content

The syntax is as follows:

html

<div NgAceAccordion>
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="card-title">
                <a NgAceAccordionToggle>
                    <i class="fa fa-angle-right toggle-icon"></i>
                    toggle 1
                </a>
            </h2>
        </div>

        <div NgAceAccordionCard [ngbCollapse]="false" aria-labelledby="headingOne">
            <div class="card-body">
                content 1
            </div>
        </div>
    </div>
 
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="card-title">
                <a NgAceAccordionToggle class="collapsed">
                    <i class="fa fa-angle-right toggle-icon"></i>
                    toggle 2
                </a>
            </h2>
        </div>

        <div NgAceAccordionCard [ngbCollapse]="true" aria-labelledby="headingTwo">
            <div class="card-body">
                content 2
            </div>
        </div>
    </div>
</div>

NgAceAccordion

Inputs

`activeId`

The current/last open card.

`closeOthers`

Default true. If true, only one accordion card can be open at a moment.

Outputs

`activeIdChange`

Emitted when a new card is opened.

html

<div NgAceAccordion #accordion="NgAceAccordion" [activeId]="myActiveId">
...
</div>

<button (click)="myActiveId = 3">Open Card 3</button>

myActiveId: any;
@ViewChild ('accordion') accordion: NgAceAccordion;

someMethod() {
    this.accordion.activeIdChange.subscribe((activeId: any) => {
        //
    })
}

NgAceAccordionToggle

Inputs

`NgAceAccordionToggle`

You can use this option to specify a custom ID for a panel/card. Otherwise it will be assigned automatically.

html

<a [NgAceAccordionToggle]="'chart-panel'" class="collapsed">
    <i class="fa fa-angle-right toggle-icon"></i>
    toggle 2
</a>