How to retrieve objects using ionic & angular

Hello Everyone,
I’m building a small game that contains a background (table) and four players on it .
I have two buttons (next & previous) when I click next I need to highlight the next player icon (replace the old icon with highlighted one).
the default highlighted icon is for player1.
I’m thinking of a way that can retrieve the next player to highlight it’s icon.

home.html

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

<ion-content padding class="bg-image">
  <ion-grid>
    <ion-row>
      <ion-col>
          <div class="player2" (click)="player2btn()">
            <br><br>
              <img src="assets/imgs/player-2.png" width=100 height=100 id="playert" name="playert">
          </div>
      </ion-col>
      <ion-col>

        <div class="playernamebox">
            <img src="assets/imgs/player name box.png">
        </div>
      </ion-col>
      <ion-col>
        <div class="player3" (click)="player3btn()">
          <br><br>
            <img src="assets/imgs/player-3.png"width=100 height=100>
        </div>
      </ion-col>

    </ion-row>
    <ion-row>
        <div *ngIf="hideme" class= "file" width=50 height=50>
            <img src="assets/imgs/file.png">
            <div class="player-description">{{playernum}}
              <img src="assets/imgs/ok btn.png">
            </div>
            
          </div>
    </ion-row>
    <ion-row>
    <ion-col>
        <div class="player1" (click)="player1btn()">
          <br><br>
            <img src="assets/imgs/player-1h.png" width=100 height=100>
        </div>
      </ion-col>
      <ion-col>
          <div class="player4" (click)="player4btn()">
            <br><br>
              <img src="assets/imgs/player-4.png"width=100 height=100>
          </div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
            <div class="previous">
              <br><br>
                <img src="assets/imgs/previous button.png"width=60 height=70>
            </div>
          </ion-col>
          <ion-col>
              <div class="next">
                <br><br>
                  <img src="assets/imgs/next button.png"width=60 height=70 ng-click="selectnext()">
              </div>
            </ion-col>
          </ion-row>
  </ion-grid>
</ion-content>

home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  hideme: boolean;
  name: string;
  playernum:string;
  player1flag: boolean;
  player2flag: boolean;
  player3flag: boolean;
  player4flag: boolean;
  id: number;


  player1btn(){
    this.playernum="P1";
    this.hideme= !this.hideme;
    
  }
  
  player2btn(){
    this.playernum="P2";
    this.hideme= !this.hideme;
    
  }
  player3btn(){
    this.playernum="P3";
    this.hideme= !this.hideme;
    
  }
  player4btn(){
    this.playernum="P4";
    this.hideme= !this.hideme;
    
  }
  nextbtn(){
    this.id=this.id+1;
    switch (this.id){
case 1:{

  break;
}
    }


  }

  constructor(public navCtrl: NavController,public NavParams:NavParams) {
this.player1flag =true;
    
  }
 
}