Move table data to next row in table after a button click in angular

Issue

I have a two tables totally Table1 and table2. Table1 is filled with data from a service. In Table1 I have columns such as Qty,Price and Checkbox. In the checkbox column I have checkboxes as values. The qty and price have number as values In table2 I have columns named Qty and Price.

Now say if I click the checkbox in row 1,2 in table1. So if you take the Qty column in table1 all the Qty values in row 1,2 will be added and be shown in qty column in table2 as a single value. Same goes for price column. (Example 6,4 are the values of qty column in row 1,2 so add(6+4) and show total in first row of qty column in table2.
Table1 when checked:
Table1 when checked

After clicking gettotal button

After clicking gettotal button

I have also deleted the rows of the particular checkboxes which I have already selected or enabled in table1 and have summed up in table2 in first row. All these functionalities happen after a button click. So after the button click a new row is formed in table2 and the enabled checkboxes have been deleted in table1.

Now what happens is that for the next time if I enable next set of checkboxes on table1 and then click the button again, instead of forming a new row the values gets overwrited in the first row of table2. I wanted the next set of total from table1 to be added as a next row(in table1) instead of overwriting or replacing the values in the first row in table2

Next set of checkboxes

Next set of checkboxes

Table2overwrited

Table2overwrited

Note :This code was done with the help of stackoverflow user Vimalpatel. I give him full credits to for the code in the stackblitz. I have Tried my best to explain. Pls comment below if my question is unclear

Stackblitz: https://stackblitz.com/edit/angular-ivy-xj8tw4?file=src%2Fapp%2Fapp.component.ts

Solution

So you can use a list of type TotalCount and then iterate over the list using *ngFor as you did with Table 1.

totalCount: any[] = [];

getTotalCount()

  getTotalCount() {
    let tC = new TotalCount();
    this.listes.map(item => {
      if (item.isChecked) {
        tC.qty = tC.qty + item.qty;
        tC.value = tC.value + item.value;

        this.listes = this.listes.slice(item.isChecked);
      }
    });
    this.totalCount.push(tC);
  }

and the html:

<tbody>
    <tr *ngFor="let totalCount of totalCount; index as j">
        <td>{{j+1}}</td>
        <td>{{totalCount.qty}}</td>
        <td>{{totalCount.value}}</td>
    </tr>
</tbody>

This code should help.

Answered By – Liam G

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.