Как изменить значок цели выпадающего списка ngx-bootstrap

Question

Мне нужно изменить значок начальной загрузки, когда раскрывающийся список открыт

У меня есть такой код component.html

    <div>
  <span dropdown (isOpenChange)="onOpenChange($event)" class="btn-group">
    <a href id="basic-link" dropdownToggle (click)="false" aria-controls="basic-link-dropdown">
      <img src="./assets/first.svg" *ngIf="!currentLayout && isDropDownOpened">
      <img src="./assets/firts_reg.svg" *ngIf="!currentLayout && !isDropDownOpened">
    </a>
    <ul id="basic-link-dropdown" *dropdownMenu class="dropdown-menu schedule-view" role="menu" aria-labelledby="basic-link">
      <li><a class="dropdown-item" (click)="navigate('')">
        <img src="./assets/first.svg">
        First
      </a></li>
    </ul>
  </span>
</div>

и component.ts

  currentLayout: string;
  isDropDownOpened = false;
  constructor(private router: Router) {}

  ngOnInit() {}

  navigate(layout) {
    this.currentLayout = layout;
    this.router.navigate([`/schedule/${layout}`], { skipLocationChange: true });
  }

  onOpenChange(data: boolean) {
    console.log(data);
    this.isDropDownOpened = !this.isDropDownOpened;

  }

И когда я нажимаю, чтобы переключить раскрывающийся список, у меня в консоли один раз true и один раз false, и раскрывающийся список не появляется.