Find out if Bootstrap accordion is open or not in Angular 5

Question

I am trying to show different icons in a Bootstrap accordion to indicate if it is open or currently closed but I am not sure how to get this data.

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" is-open="isOpen" >
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <span class="pull-right">
         <div *ngIf="isopen">
          <fa name="minus"></fa>
        </div>
        <div *ngIf="!isopen">
          <fa name="plus"></fa>
        </div>
      </span>
    </ng-template>
    <ng-template ngbPanelContent>
      Some text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

The examples are not covering it and I only found examples for angular-ui.

Thank you very much.

Answer 1

You can use panelChange event to know if the panel or open or not, the event has the nextState parameter. This is the html code:

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" (panelChange)="test($event)" >
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>Some title</span>
      <div class="pull-right">
         <div *ngIf="openById['ngb-panel-0']">
          open
        </div>
        <div *ngIf="!openById['ngb-panel-0']">
          close
        </div>
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
      Some text
    </ng-template>
  </ngb-panel>
</ngb-accordion>

And the ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  openById = {};
  test(event){
    this.openById[event.panelId] = event.nextState;
  }
}

Answer 2

I'm not sure if this is the best solution, but you can use, for example, 'activeIds' property like this:

import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
...
export class SomeComponent implements OnInit {
@ViewChild('accordion') accordion: NgbAccordion;
data: any[];
...

  isOpen(i): boolean {
     return this.accordion && this.accordion.activeIds.includes(i.toFixed());
  }
...
}

And the html template:

  <ngb-accordion #accordion>
    <ngb-panel *ngFor="let item of data, let i=index" id="{{i}}">
      <ng-template ngbPanelTitle>
         <div class="row">
          <div>{{item.title}}</div>
          <div>
            <span [ngClass]="{'icon-arrow-up': isOpen(i), 'icon-arrow-down': !isOpen(i)}"></span>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
       <div>{{item.content}}</div>
      </ng-template>
    </ngb-panel>
  </ngb-accordion>