How to change ion-grid selected column colour

how to change ion-grid selected column background colour also how to get the clicked index or clicked cell value.

you want to make something like a color picker?

Nope. My need is i have a grid with category images and the images loaded from array. When i will click on the grid item means grid column i want to display the selected image with any different backrmground colour or border. Also i need to know how i can get the selected image name. I hope it can implement with button click inside column but i need to know is there any other method like in ios default gridview clicked index delegate.

Binding style properties is documented here.

I need to know how to get the selected cell in grid not only for the style case i need to get the selected value too. Can you please guide that.

You can do something like this:

  <ion-col style="background:#330000" (tap)="someAction(value)">&nbsp;</ion-col>

I got the clicked value on other function but i couldn’t able to change the clicked cell background colour here is my code please check it.

<ion-col col-3 *ngFor=“let col of arrCatimages; let idx = index” (click)=“onItemClicked(col, idx)” [class.selected]=“idx === currentSelected”>

background-color: red;

onItemClicked(data, idx){


you have to mention rowIndex in ion-row and colIndex in ion-col. After that in Click event pass as parameter.
Now whenever you have to click any cell, just use
index = (rowIndex * n) + colIndex; // n is number of columns in a row.

showImage(event, rIndex, cIndex) {
let index: any;

index = (rIndex*3) + cIndex;


<ion-row wrap class=“ion-row” *ngFor=“let row of grid; let rIndex = index;”>
<ion-col class=“ion-col” width-33 *ngFor=“let file_uri of row; let cIndex = index;”>
<img [src]=“file_uri” (click)=“showImage($event, rIndex, cIndex)” class=“thumb-img”>