Multi tool use

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>


2 Answers
2

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>


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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.