CODEWITHSUNDEEP
angularaccordionngx-bootstrap
Andrew Rutazamba
Andrew Rutazamba

Reputation: 51

Adding Chevron icon to ngx-bootsrap accordion

I have a problem changing the chevron from UP to DOWN when clicking the accordion. It seems to always result to true no matter what trick I tried and even tried other examples like this https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app%2Fapp.component.html

        <accordion [closeOthers]="true">
                <accordion-group #group [isOpen]='true'>
                    <div accordion-heading class="clearfix">
                        Basic Information
                        <span class="badge badge-secondary float-right pull-right">
                            <i class="fa" [ngClass]="!group?.isOpen ? 'fa-chevron-down': 'fa-chevron-down'"></i>
                        </span>
                    </div>
                </accordion-group>
            </accordion>

Upvotes: 5

Views: 4400

Answers (3)

goncuesma
goncuesma

Reputation: 121

This works for me (Angular 11 & ng-bootstrap v9.x):

<ngb-accordion #acc="ngbAccordion" activeIds="static-1">
  <ngb-panel id="static-1">
    <ng-template ngbPanelHeader let-opened="opened">
      <div (click)="acc.toggle('static-1')" style="cursor: pointer" class="d-flex align-items-center justify-content-between">
        <h5 class="m-0">Title</h5>
        <span class="fas" [ngClass]="{'fa-chevron-down': !opened, 'fa-chevron-up': opened}"></span>
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
     Content
    </ng-template>
  </ngb-panel>
</ngb-accordion>

I know if the panel is open with the let-opened property.

Then I use the specified var (opened) to display the chevron up/down icon.

And finally, I open/close the panel using the toggle method (NgbAccordion) within the click clause.

Upvotes: 0

Wei
Wei

Reputation: 31

this one works:

  <accordion>
      <accordion-group #group1 [isOpen]='true'>
        <div accordion-heading class="clearfix">
        Basic Information
          <span class="badge badge-secondary float-right pull-right">
            <i class="fa" [ngClass]="{'fa-chevron-up': group1.isOpen, 'fa-chevron-down': !group1.isOpen}"></i>
          </span>
        </div>
  </accordion>

Upvotes: 3

undejavue
undejavue

Reputation: 99

I'm not sure if this is a best solution, but it is working for me:

   <ngb-accordion #accordion [closeOthers]="true" >
    <ngb-panel *ngFor="let round of data, let i=index">
      <ng-template ngbPanelTitle>
        <div class="d-flex flex-row justify-content-between" style="width: 100%">
          <div class="p-2">
            {{round.title}}
          </div>
          <div class="p-2">
            <span [ngClass]="{'icon-arrow-up': accordion.panels._results[i].isOpen, 'icon-arrow-down': !accordion.panels._results[i].isOpen}"></span>
          </div>
        </div>
      </ng-template>
      <ng-template ngbPanelContent>
        {{round.info}}
      </ng-template>
    </ngb-panel>
  </ngb-accordion>

Take a look to accordion.panels._results[i].isOpen. Also, add to component.ts:

   import { AccordionComponent } from 'ngx-bootstrap';
   ...
   @ViewChild('accordion') accordion: AccordionComponent;

Upvotes: 2

Related Questions