ionic button click to change the color of the next column or row of a grid

Question

I am pretty new at ionic and angular. I made a grid dynamically from a bidimensional array and 2 buttons "next column" and "next row".

  <ion-grid >
   <div *ngFor="let row of grid">
     <div  *ngFor="let div of row" class="no-color">
      {{div}}
     </div>
   </div>
  </ion-grid>

  <ion-button (click)="SetColorToNextDiv()"> Next Div </ion-button>
     
  <ion-button (click)="SetColorToNextRow()"> Next Row </ion-button>

What I am trying to do is to "navigate" in the grid setting a background color to the next column or row when I click the corresponding button starting from the first column of the first row. Example:

starting with all div 'no-color'. on click next row button div 1 in row 1 set class 'ClassColor',all the rest 'no-color'. click next div button div 1 in row 2 set class 'ClassColor' , all the rest 'no-color'. on click next row button div 2 in row 2 set class 'ClassColor',all the rest 'no-color'. etc etc

what is the best way to achieve it with ionic/angular? i guess i could do it setting an id attribute in ngfor and then set the class by id like document.getElementById(id).className = "ClassColor"; but i am sure there is a better approach.

toyseed toyseed · Accepted Answer · 2020-09-09T17:16:56

I think it could be help.

<div>
  <div class="row" *ngFor="let row of data;let ri = index;">
    <span class="col" [class.selected]="ri === r && ci === c" *ngFor="let col of row;let ci = index;">
      {{col}}
    </span>
  </div>
</div>

r and c is component's member variable. By adjusting r and c on button click, you can change selected element.

ionic button click to change the color of the next column or row of a grid

1 Answers