Ion Grid Active

Ionic Framework ionic-v3
1

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!

2

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

3

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