html code :
<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>
ts code :
@Component({
changeDetection: ChangeDetectionStrategy.Default
})
isProfileMenuOpen = false;
toggleProfileMenu(): void {
this.isProfileMenuOpen = !this.isProfileMenuOpen;
}
when I click on that arrow/triangle , nothing happens (what should happen : the items of the drop list appear and when u click once again they disappear )