list item selection not working - html

Question

I am trying to implement a list where the user can select an element. I can select items but the "active" class is not removed from the previous ones. If I click in all of them, then all will be selected.
I am developing using twitter bootstrap and angular
<ul class="list-group" id="list-opponents">
<li *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span class="mr-3">{{ opponent.name }}</span>
<img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
</li>
</ul>
the produced html is the following:
<ul _ngcontent-c1="" class="list-group" id="list-opponents">
<!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object"}-->
<li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active" data-toggle="list" id="1">
<span _ngcontent-c1="" class="mr-3">Me</span>
<img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/ana.JPG">
</li>
<li _ngcontent-c1="" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-toggle="list" id="2">
<span _ngcontent-c1="" class="mr-3">You</span>
<img _ngcontent-c1="" class="figure-img img-fluid rounded" src="../../../assets/tininha.JPG">
</li>
</ul>
UPDATE: you can find a jsfidle here: https://jsfiddle.net/Bonomi/Lkz161er/7/

Answer 1

I figured out what the problem is. I can't use the ul li elements, I solved the problem using div and a:
<div class="list-group" id="list-opponents">
<a *ngFor="let opponent of model.availableOpponents; let first = first" [class.active]="first" id="{{ opponent.id }}" data-toggle="list" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<span class="mr-3">{{ opponent.name }}</span>
<img class="figure-img img-fluid rounded" src="{{opponent.photoUrl}}" />
</a>
</div>
It works now.