Как добавить значок свертывания в ngx-bootstrap Accordion

Question

В моем приложении Angular, использующем ngx-bootstrap, я хотел бы добавить значок свертывания, который отражает статус аккордеона (свернутый / развернутый), как показано ниже:

Answer 1

Вот решение, которое сработало для меня

<accordion-group [isOpen]="false" #myGroup>
  <button class="btn btn-light float-right">
    {{ myGroup?.isOpen ? 'Opened' : 'Closed' }}
    <i class="fas" [ngClass]="{'fa-caret-down': myGroup?.isOpen, 'fa-caret-up': !myGroup?.isOpen}"></i>
  </button>
</accordion-group>

Answer 2

Вы можете сделать это в 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;
}

Просто нужно стилизовать селектор перед шрифтом с фамилией вашей любимой иконки...

Answer 3

Следующий ответ работает с ngx-bootstrap@5.x.x. Также решает проблему для людей, желающих использовать что-то отличное от FontAwesome:

<!-- Please note that the #accordionGroupRef is scoped! -->
<accordion-group
    *ngFor="let number of [1,2,3,4];"
    [isOpen]="false"
    #accordionGroupRef
>

    <!-- Header -->
    <h5 class="m-0" accordion-heading>
        {{ accordionGroupRef.isOpen ? "OPEN" : "CLOSED"}}
        I am accordion {{number}}
        <span class="float-right"> I float all the way on the right!</span>
    </h5>    

    <!-- Content -->
    Accordion content
</accordion-group>

Answer 4

Вы можете использовать accordion-group вход 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;

Я рекомендую установить https://fontawesome.com/