CODEWITHSUNDEEP
cssionic-frameworkionic3
Jayesh
Jayesh

Reputation: 681

How to highlight selected item/items in a Ionic-list

I have a list of items populating on a screen and just wanted to highlight the selected item/items in the list view , please help

 <ion-list >
  <button ion-item *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

Upvotes: 2

Views: 11266

Answers (3)

Fidel Gonzo
Fidel Gonzo

Reputation: 574

This works with the built in Theme - no need for custom CSS

[attr.color]="item === selected ? 'primary' : ''"

In your code:

 <ion-list >
  <button ion-item *ngFor="let route of Routes" [attr.color]="route.selected ? 'primary' : ''" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

Upvotes: 1

Joseph Ocampo
Joseph Ocampo

Reputation: 61

It works! 

[class.stylename]="Some conditional statement that will return true or false"

<!-- This will probably go into your SCSS stylesheet -->
<style>
.highlight {
   background-color: #FFFF33 !important;
}
</style>

<!-- In your HTML code -->
 <ion-list >
  <button ion-item [class.highlight]="route.selected" *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

.ts

route.selected = false;
selectCP(route){
   route.selected =! route.selected;  
}

Upvotes: 3

changsiang
changsiang

Reputation: 157

Using Angular conditional style function.

[class.stylename]="Some conditional statement that will return true or false"

Example:

<!-- This will probably go into your SCSS stylesheet -->
<style>
.highlight {
   background-color: #FFFF33 !important;
}
</style>

<!-- In your HTML code -->
 <ion-list >
  <button ion-item [class.highlight]="route == 1" *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

Upvotes: 5

Related Questions