Angular 4+ bootstrap NgbAccordion how to expand / collapse all

You can use the activeIds input on the accordion

https://ng-bootstrap.github.io/#/components/accordion/api

Basically, assign a unique id to each of your panels

<ngb-panel *ngFor="let container ...; let i= index" title="Panel{{i}}" id="panel-{{i}}"

and declare in your component a list of the active ids (= ids of the panels that must be open)

activeIds: string[] = [];

Then modify that list when you want to open/close the panels

this.activeIds = [];//All panels closed
this.activeIds = ['panel-1', 'panel-2']; //panels 1 and 2 are open

And bind this variable to the activeIds input of the accordion

<ngb-accordion #acc="ngbAccordion" [activeIds]="activeIds"

Finally, add the buttons

<button (click)="activeIds=[]" >close all</button>
<button (click)="openAll()" >open all</button>

openAll()
{
    this.activeIds = [/* add all panel ids here */];
}

I created a stackblitz to illustrate this

https://stackblitz.com/edit/angular-nzzwnc?file=app%2Fapp.component.ts

= Here is a solution that will allow you to open only one accordion at a time. you can use with (panelChange) Captures changes of ngb like this:

html:

   <ngb-accordion #acc="ngbAccordion"  [activeIds]="activeId"  (panelChange)="toggleAccordian($event)">
    <ngb-panel *ngFor="let option of options;" title="{{option}}">
        <ng-template ngbPanelContent>
                    <ul class="nav nav-tabs">
                      <!--some code-->
                    </ul>
        </ng-template>
    </ngb-panel>
</ngb-accordion>

ts:

activeId: string = "";

toggleAccordian(event) {
    // If it is already open you will close it and if it is closed open it
    this.activeId = this.activeId == event.panelId ? "" : event.panelId;
}