How to get selected row index by checkbox in angular 13

Question

I am trying to add data to table2 from table1, So i have used data1 and data2 array object.

If i click the checkbox from table 1 i want to add that object to data2.
If i click the checkbox from table 2 i want to remove that object from data2.

I do not know how to get that selected row index by clicking the checkbox. If anyone knows please help to find the solution.

Demo: https://stackblitz.com/edit/angular-ivy-8dfjxs?file=src%2Fapp%2Fapp.component.html

app.component.html:

    <h5 class="text-center">Table 1</h5>
<div class="table1">
  <table class="table table-bordered">
    <thead></thead>
    <tbody>
      <ng-container *ngFor="let row of data">
        <tr>
          <td><input type="checkbox" /></td>
          <td (click)="row.isExpand = !row.isExpand">
            <i *ngIf="!row.isExpand" class="bi-chevron-right"></i>
            <i *ngIf="row.isExpand" class="bi-chevron-up"></i>
            {{ row.name }}
          </td>
        </tr>
        <tr *ngIf="row.isExpand">
          <td colspan="2">
            {{ row.expandData }}
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

<button (click)="addSelectedRow()">Add Selected Row To The Table2</button>

<h5 class="text-center">Table 2</h5>
<div class="table2">
  <table class="table">
    <thead></thead>
    <tbody>
      <ng-container *ngFor="let row of data2">
        <tr>
          <td><input type="checkbox" name="box" /></td>
          <td (click)="row.isExpand = !row.isExpand">
            <i *ngIf="!row.isExpand" class="bi-chevron-right"></i>
            <i *ngIf="row.isExpand" class="bi-chevron-up"></i>
            {{ row.name }}
          </td>
        </tr>
        <tr *ngIf="row.isExpand">
          <td colspan="2">
            {{ row.expandData }}
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

<button (click)="removeSelectedRow()">
  Remove Selected Row From The Table2
</button>

app.component.ts:

 addSelectedRow(){
  let selectedRowIndexFromTable1 = ??//How to get selected row index?
  this.data2.push(this.data1[selectedRowIndexFromTable1]);
  }

  removeSelectedRow(){
  let selectedRowIndexFromTable2 = ??//How to get selected row index?
  this.data2.splice(this.data2[selectedRowIndexFromTable2]);
  }

Answer 1

To achieve this, you can make the following modifications to your code:

1. Add a new property isSelected to each object in data and data2 arrays to keep track of whether the checkbox is selected or not.
2. Use the [(ngModel)] directive to bind the isSelected property to the checkbox in the template.
3. In the addSelectedRow and removeSelectedRow functions, use Array.findIndex to find the index of the selected row based on the isSelected property.

Here's the updated code:

app.component.ts:

import { Component } from '@angular/core';

interface RowData {
  name: string;
  expandData: string;
  isExpand: boolean;
  isSelected: boolean; // Add isSelected property
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  data: RowData[] = [
    { name: 'Row 1', expandData: 'Details 1', isExpand: false, isSelected: false },
    { name: 'Row 2', expandData: 'Details 2', isExpand: false, isSelected: false },
    // Add more rows as needed
  ];

  data2: RowData[] = [
    { name: 'Row A', expandData: 'Details A', isExpand: false, isSelected: false },
    { name: 'Row B', expandData: 'Details B', isExpand: false, isSelected: false },
    // Add more rows as needed
  ];

  addSelectedRow() {
    const selectedRowIndexFromTable1 = this.data.findIndex((row) => row.isSelected);
    if (selectedRowIndexFromTable1 !== -1) {
      this.data2.push({ ...this.data[selectedRowIndexFromTable1], isSelected: false });
    }
  }

  removeSelectedRow() {
    const selectedRowIndexFromTable2 = this.data2.findIndex((row) => row.isSelected);
    if (selectedRowIndexFromTable2 !== -1) {
      this.data2.splice(selectedRowIndexFromTable2, 1);
    }
  }
}

app.component.html:

<!-- Update the checkboxes to use [(ngModel)] -->
<td><input type="checkbox" [(ngModel)]="row.isSelected" /></td>
<!-- ... -->

<!-- Add a button to toggle selection in Table 1 -->
<button (click)="toggleSelectAll()">Select/Deselect All in Table1</button>

Don't forget to import FormsModule in your module to enable the use of [(ngModel)].