Ion Grid Active

Hello All,

I have trouble figuring out how to do this. Basically, I have a 5x3 grid. The grid contains icons.

What I want to do is when I click a grid, the cell will change the background color, from none to green, making it the active cell. Once I click another cell, that cell will become the active one instead. At the same time, I need the icon name of the selected cell.

Is this possible to pull off?

Thank you!

Yes. What have you tried so far, and how does it behave differently from what you desire?

Ok, after tinkering the code and researching for a bit I was able to move forward a bit.

This is my HTML code:

> <ion-row *ngFor="let row of categories; let rIndex = index">
> 	<ion-col *ngFor="let column of row.column; let cIndex = index" (click)="changeColor(rIndex, cIndex, column.id, column.icon, column.selected)">
> 	  <ion-icon [name]="column.icon" class='absolute-center' [class.selected]="column.selected == 1"></ion-icon>
> 	</ion-col>
> </ion-row>

This is my TS file

constructor(public navCtrl: NavController, public navParams: NavParams) {
  	
  	this.categories = [
  		{
  			column: [
  				{id: 1, icon: 'ios-clock', selected: 0},
  				{id: 2, icon: 'ios-clock', selected: 0},
  				{id: 3, icon: 'ios-clock', selected: 0},
  				{id: 4, icon: 'ios-clock', selected: 0},
  				{id: 5, icon: 'ios-clock', selected: 0}
  			]
  		}, {
  			column: [
  				{id: 6, icon: 'ios-clock', selected: 0},
  				{id: 7, icon: 'ios-clock', selected: 0},
  				{id: 8, icon: 'ios-clock', selected: 0},
  				{id: 9, icon: 'ios-clock', selected: 0},
  				{id: 10, icon: 'ios-clock', selected: 0}
  			]
  		}
  	]
  }
changeColor(rIndex, cIndex, id, icon, selected) {
  	if(this.categories[rIndex].column[cIndex].selected == 1) {
  		this.categories[rIndex].column[cIndex].selected = 0;
  	}else
  		this.categories[rIndex].column[cIndex].selected = 1;
  }

My problem is how to make the other cell inactive if you press another cell