Make selected item Highlighted with Angular and Ionic

Question

Now I have a list of Items. Items are retried from API. Now I need to highlight Selected Item. when the page loads the first item is selected and then I select another item so highlight this item and the first item's highlight removed.

In this Img I selected the second item and add a border as shows it selected by the user.

<!--I share Code-->
   <ion-list *ngFor="let item of items">
      <ion-item >
          {{item.name}}
       </ion-item>
     </ion-list>

Answer 1

You could use ngClass for this.

<ion-list *ngFor="let item of items" (click)="selectItem(item)">
    <ion-item [ngClass]="{'item-selected':item.value === yourSelectedModelValue}">
        {{item.name}}
    </ion-item>
 </ion-list>

And inside your class.

selectItem (item) {
    this.yourSelectedModelValue = item;
}