Only one selection on table ionic 3

I want to ask, so I want to make app that can only select one specific row and column on table on ionic 3, I want to develop ionic for android. Here is the screenshot and code.

image717×928 122 KB

<tr *ngFor="let pc of priceList[u]; let i = index">
        <td>{{pc.dp/1000000|number:'1.1-3'}}</td>

        <ng-container *ngFor="let amount of priceList[u]; let j = index">
          <td (click)="tableClicked(i, j)" *ngIf="!applyStyleToSelected(i, j)">{{amount.instAmt/1000000|number:'1.1-3'}}</td>
          <td class="selected" (click)="tableClicked(i, j)" *ngIf="applyStyleToSelected(i, j)">{{amount.instAmt/1000000|number:'1.1-3'}}</td>
        </ng-container>

      </tr>

.selected{
  background-color: darkred;
  color: white;
}

tableClicked(row: number, col: number) {
    console.log('row -> ', row);
    console.log('col -> ', col);

    if(this.selectedIndex && row == this.selectedIndex.r && col == this.selectedIndex.c) {
      this.selectedIndex = null;

      return;
    }

    this.selectedIndex = {
      r: row,
      c: col
    };
  }

  applyStyleToSelected(row: number, col: number): boolean {
    if(!this.selectedIndex) {
      return false;
    }

    return this.selectedIndex.r == row && this.selectedIndex.c == col;
  }

1 post - 1 participant

Read full topic