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>

Nitheesh · Accepted Answer · 2020-09-02 05:35:17Z

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;
}

edited Sep 2, 2020 at 5:35

answered Sep 2, 2020 at 5:27

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pritesh Bhoi Over a year ago

Thanks ! item.value = name & what about yourSelectedModelValue.

Nitheesh Over a year ago

@Pritesh yourSelectedModelValue thats the value for which the selection to be done

Pritesh Bhoi Over a year ago

I have sub item so how can i highlight that

Nitheesh Over a year ago

@Pritesh same logic. Use ngClass with another scope variable.

Collectives™ on Stack Overflow

Make selected item Highlighted with Angular and Ionic

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related