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