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]);
}
To achieve this, you can make the following modifications to your code:
isSelected
to each object in data
and data2
arrays to keep track of whether the checkbox is selected or not.[(ngModel)]
directive to bind the isSelected
property to the checkbox in the template.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)]
.