ionic2 and angular2 list element style depending on condition

You can do that by using a property to hold the selected item; that way, only one item could be marked as selected. Please take a look at this working plunker.

Component

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class User {
  public id: number;
  public name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html',
  styles: [`
    .active {
      background-color: antiquewhite;
    }
  `]
})
export class HomePage {

  public users: Array<User>;
  public selectedUser: User;

  constructor(public navController: NavController) {
    this.users = [];
    this.users.push(new User(1, 'User 1'));
    this.users.push(new User(2, 'User 2'));
    this.users.push(new User(3, 'User 3'));
    this.users.push(new User(4, 'User 4'));
    this.users.push(new User(5, 'User 5'));

    this.selectedUser = this.users[0];
  }

  public checkActiveUser(user: User): boolean {
    return user.id === this.selectedUser.id;
  }

  public selectUser(user: User): void {
    this.selectedUser = user;
  }

}

View

<ion-header>
  <ion-navbar>
    <ion-title>Ionic App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-lines>
    <ion-item (click)="selectUser(user)" [class.active]="checkActiveUser(user)" *ngFor="let user of users">
      {{ user.name }}
    </ion-item>
</ion-list>
</ion-content>

So basically we have a list of users (the one we use to create all the items) and we can also have a property in our component, named selectedUser, where we can assign the currently selected user (or the first user of the users list as default). We need that additional property to know which one we need to highlight. By using a single property, be can also allow only one user to be highlighted.

Once we have the list of users ready, and an selectedUser property (which is one of the users of the list), we just need to add a class to the item that represents the selected user. To do so, we add in the item:

[class.active]="checkActiveUser(user)"

the checkActiveUser(...) method receives an user and uses its id to check if that user is the same user of the selectedUser property. That way, the active class will be only added to the item that represents the user that we have selected.

The only thing left, is to add some styles to the active class to highlight that item.