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

Question

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

Answer 1

Вы можете использовать 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/

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;
}

Просто добавьте в селектор before стиль шрифта familly вашей любимой иконки ...