Angular – почему мой раскрывающийся список не работает

HTML-код:

<li class = "nav-item dropdown pe-3">
  <a class = "nav-link nav-profile d-flex align-items-center pe-0" (click) = "toggleProfileMenu()">
    <img src = "assets/img/profile-img.jpg" alt = "Profile" class = "rounded-circle">
    <span class = "d-none d-md-block dropdown-toggle ps-2">{{ username  }}</span>
  </a>

  <ul class = "dropdown-menu dropdown-menu-end dropdown-menu-arrow profile" *ngIf = "isProfileMenuOpen" (click) = "$event.stopPropagation()">
    <li class = "dropdown-header">
      <h6>{{username}}</h6>
    </li>
    <li>
      <hr class = "dropdown-divider">
    </li>
    <li>
      <a class = "dropdown-item d-flex align-items-center">
        <i class = "bi bi-gear"></i>
        <span>Account Settings</span>
      </a>
    </li>
    <li>
      <hr class = "dropdown-divider">
    </li>
    <li>
      <a class = "dropdown-item d-flex align-items-center" (click) = "logout()">
        <i class = "bi bi-box-arrow-right"></i>
        <span>Sign Out</span>
      </a>
    </li>
  </ul>
</li>

код ТС:

@Component({
  changeDetection: ChangeDetectionStrategy.Default
})
isProfileMenuOpen = false;
  

  toggleProfileMenu(): void {
    this.isProfileMenuOpen = !this.isProfileMenuOpen;
  }

Когда я нажимаю на эту стрелку/треугольник, ничего не происходит. (Ожидаемый результат: элементы выпадающего списка появляются, а при повторном нажатии они исчезают)