Hi. How to change a selected icon inside ngFor on click. i tried but it ended up in changing all the icons in the loop. Please help

Ionic Framework Ionic Angular
1 
<ion-col size="6" *ngFor="let mylocation of currentLocation; let i=index">
    <img src={{mylocation.img}} />
    <ion-item lines="none">
      <p style="margin-inline-start: unset; font-weight: bold;font-size: 12px;">{{{{mylocation.name}}</p>
      <ion-icon *ngIf="!joinRequest" (click)="sendRequest(i)" slot="end" name="person-add"></ion-icon>
      <ion-icon slot="end" *ngIf="joinRequest" name="checkmark-circle"></ion-icon>
    </ion-item>
  </ion-col>
2

guys anyone please answer

3

have a look this link i hope its work for you

1 Like
4

If you use the same Variable in the Loop you change all icons of course. What i normally would do is to add a variable to every List (currentLocation in your case) Item. Then use this variable and change this on click.

2 Likes
5

Thanks for your reply and ans guys, I found solution for this
<ion-col size=“6” *ngFor=“let mylocation of currentLocation; let i=index” (click)=“goToHome(i)”>


{{mylocation.name}}


<ion-icon slot=“end” [ngClass]=“mylocation.isSelect?‘join_request’:‘person-add’” [name]=“mylocation.isSelect?‘checkmark-circle’:‘person-add’”>


goToHome(index: number) {
for (let i = 0; i < this.currentLocation.length; i++) {
if (index == i) {
this.currentLocation[i].isSelect = true;
this.joinRequest = this.currentLocation[i].value;
this.router.navigate([’/tabs/tab2’])
} else {
this.currentLocation[i].isSelect = false;
}
}
}