How can I in Angular 2 add active class to selected item on click and remove that class on again click. But for multiple items in list.
<li *ngFor="let item of items" (click)="itemSelected(item)">
<p>{{ item }}</p>
</li>
For example I have list of 5 items. Click on first item add class active and then for fifth item add also class active.
You can use:
[NgStyle] https://angular.io/api/common/NgStyle
[NgClass] https://angular.io/api/common/NgClass
For example:
<li *ngFor="let item of items" (click)="itemSelected(item)">
<p [NgClass]="listSelectedItems.indexOf(item)>-1"?"your-active-class":"your-inactive-class" >{{ item }}</p>
</li>
With itemSelected() which add or remove item from listSelectedItems
You can use the syntax from here:
<li *ngFor="let item of items" (click)="selectItem(item)" [class.selected]="isSelected(item)">
<p>{{ item }}</p>
</li>
This seems a bit more idiomatic than using ng-class.