ng-bootstrap, при щелчке изменить значок выпадающего меню

Question

при клике, изменить на иконку: - fa-angle-down.

По умолчанию я показываю fa-angle-up, при клике он должен измениться на fa-angle-down.

<div class="col text-right">
    <div ngbDropdown placement="top-right" class="d-inline-block">
      <div  id="dropdownBasic2" ngbDropdownToggle>
        <i class="fa fa-angle-up fa-5x"></i>
      </div>
      <i class="fa fa-angle-down fa-5x"></i> <!--show me on click-->
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Используйте переменную шаблона для получения метода isOpen, который возвращает логическое значение, используйте это значение и класс привязки соответственно

<div class="col text-right">
        <div  #myDrop="ngbDropdown" ngbDropdown placement="top-right" class="d-inline-block">
          <div  id="dropdownBasic2" ngbDropdownToggle>
            <i [ngClass] ="Mydrop.isOpen() ==true ? 'fa fa-angle-up ' : ''fa fa-angle-down' "></i>
          </div>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
            <button class="dropdown-item">Action - 1</button>
            <button class="dropdown-item">Another Action</button>
            <button class="dropdown-item">Something else is here</button>
          </div>
        </div>
      </div>
    </div>