I am currently experimenting with Bootstrap list-groups and Angular 5. I have encountered an issue where clicking on a specific item in the list-group activates all items instead of just the one clicked. Is there a way to enable only the clicked item in the list-group?
-- Bootstrap 4
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
-- my list
<ul class="list-group">
<li class="list-group-item" [class.active]="!isActive" (click)="onClick(s)" *ngFor="let s of $speech | async" [value]="s.$key">
{{s.speech}}
<i class="fa fa-chevron-right"></i>
</li>
</ul>
-- from the components
isActive = false;
onClick(s) {
console.log(s)
this.isActive = !this.isActive;
}