Within my Angular 2 application, I have implemented a collapsible and expandable menu. The issue I am facing is with the toggling of icons - when expanding one menu item, the icon changes correctly but it also changes for all other menu items that are not expanded.
How can I ensure that the icon toggle only affects the clicked menu item? Additionally, how can I make sure that the previously expanded item collapses before expanding the new one, so that only one menu item is expanded at a time?
Below is the HTML snippet within a loop:
<a data-toggle="collapse" [attr.aria-controls]="itemType.id" [attr.data-target]="'#'+itemType.id" (click)="toggleCollapse()">
<span>{{itemType.name}}</span>
<span class="win-icon" [ngClass]="collapse == 'open' ? 'win-icon-ChevronDown':'win-icon-ChevronLeft'"></span>
</a>
<ul [id]="itemType.id" data-toggle="buttons">
<li class="btn" routerLinkActive="active">
<input type="radio">
<span (click)="...">
item 1
</span>
</li>
[...]
</ul>
In my component:
public collapse: string = "closed";
public toggleCollapse() {
this.collapse = this.collapse == "open" ? 'closed' : 'open';
}