How to set an ngb-accordion to expand in Angular-CodePudding

I currently have ngb-accordions set to a number of panels. By default the panels are closed and I am using a custom function to expand them when clicked. I would like to know how to set an accordion to be expanded by default if the category name is select.

  <div >
      <ngb-accordion #filterAccordion [animation]="false" (click)="heightChanged()"#acc="ngbAccordion" [activeIds]="activeIds">
        <ngb-panel *ngFor="let filterCategory of filterCategories | filterCategory | keyvalue : returnZero ;let i= index" id="panel-{{i}}">
            <ng-template ngbPanelTitle>
              <button  (click)="heightChanged()">
                <span>{{filterCategory.value.translationId | translate}}</span>
              </button>
            </ng-template>
            <ng-template ngbPanelContent *ngIf="filterCategory.value.filterParameters.length > 0">
              <div >
                <div  *ngFor="let filter of filterCategory.value.filterParameters | keyvalue">
                  <app-filter-parameters *ngIf="filterCategory.key.toString() !== 'select'"
                                         [(filterParameterValue)]="filter.value.value"
                                         [filterParameterName]="filter.value.key"
                                         [dsaComponent]="'dashboardFilter'"
                                         (applyFilters)="apply()">
                  </app-filter-parameters>
                </div>
              </div>
              <div >
                <div  *ngIf="filterCategory.key.toString() === 'select'">
                  <app-date-picker
                    [filterParameters]="filterCategory.value.filterParameters"
                    [dsaComponent]="'dashboardFilter'"
                    (updateTimeframe)="this.updateFilter($event)">
                  </app-date-picker>
                </div>
              </div>
            </ng-template>
          </ngb-panel>
      </ngb-accordion>
    </div>

CodePudding user response：

You should use activeIds to open panels initially.

You added id="panel-{{i}}" to each panel. So for example, if first panel should be opened by default, you should initialize activeIds="panel-0":

<ngb-accordion #filterAccordion [animation]="false" (click)="heightChanged()"#acc="ngbAccordion" activeIds="panel-0">

CodePudding user response：

Set same ID for all ngb-panels:

<ngb-accordion [activeIds]="activeIds"></ngb-accordion>

// For example
this.activeIds = ['UNIQ_ID','UNIQ_ID','UNIQ_ID'];