CODEWITHSUNDEEP
htmlangularfrontendaccordionpanel
Matt
Matt

Reputation: 45

How to set an ngb-accordion to expand in Angular

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 class="col-md-12">
      <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 class="header-btn" (click)="heightChanged()">
                <span>{{filterCategory.value.translationId | translate}}</span>
              </button>
            </ng-template>
            <ng-template ngbPanelContent *ngIf="filterCategory.value.filterParameters.length > 0">
              <div class="row">
                <div class=" col-md-2" *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 class="row">
                <div class="form-group col-md-2" *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>

Upvotes: 1

Views: 7932

Answers (3)

Mario Figueiredo
Mario Figueiredo

Reputation: 326

Since this still comes up as top search for "ngbaccordion open default", thought i should include some updated information,

With the updates to the new attribute based ngbAccordion, ie:

<ngb-accordion>

now becomes:

<div ngbAccordion>

we can now expand using collapsed attribute on ngbAccordionItem to set open by default, ie:

<div ngbAccordionItem [collapsed]="false">

Upvotes: 2

Иброхим
Иброхим

Reputation: 29

Set same ID for all ngb-panels:

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

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

Upvotes: 2

NeNaD
NeNaD

Reputation: 20304

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">

Upvotes: 0

Related Questions