Looking for a solution: How can I toggle icons using ngFor?
Situation: I am using *ngFor to iterate through an array and display category names. When a day is clicked, I want to open an accordion and show category details (which I have already managed). Once the accordion is opened, I need to switch the fa-plus icon with fa-minus and vice versa, but only for the clicked day.
Any effective way to achieve this?
this.categoryList = [
{type: 'space', name: 'Space'},
{type: 'energy', name: 'Energy'},
{type: 'comfort', name: 'Comfort'},
{type: 'maintenance', name: 'Maintenance'},
{type: 'reporting', name: 'Reporting'}
];
HTML
<div class="{{category.type}}" *ngFor="let category of categoryList">
<div data-toggle="collapse" [attr.href]="'#'+'category-'+category.type">
<div class="title {{category.name}}">{{category.name}}</div>
<div>
<i class="fa fa-plus"></i> //needs to toggle between plus and minus
<i class="fa fa-minus"></i> //needs to toggle between plus and minus
</div>
</div>
<div class="collapse" id="category-{{category.type}}">
//details
</div>
</div>