How to add a collapse icon in ngx-bootstrap Accordion

In my Angular app that is using ngx-bootstrap, I would like to add a collapse icon which reflects the status of the accordion (collapsed/expanded) like the following:

enter image description here

enter image description here

2 answers

  • answered 2018-12-05 20:53 candybeer

    You can basically do this in css :

    .accordion-toggle[aria-expanded="true"]:before {
        content: "\f107";
        font: normal normal normal 14px/1 FontAwesome;
    }
    
    .accordion-toggle[aria-expanded="false"]:before {
        content: '\f106';
        font: normal normal normal 14px/1 FontAwesome;
    }
    

    Just have to style the before selector with the font familly of your favorite icon...

  • answered 2018-12-05 21:07 Stephen Collins

    You can use the accordion-group input isOpen.

    HTML

    <accordion-group [isOpen]="isContentOpen">
      <button class="btn btn-light float-right">
        <i *ngIf="isContentOpen" class="fas fa-caret-up">Open</i>
        <i *ngIf="!isContentOpen" class="fas fa-caret-down">Close</i>
      </button>
    </accordion-group>
    

    TS

    isContentOpen: boolean = false;
    

    I recommend installing https://fontawesome.com/