Add row dynamically in reactive from

Question

I want to add the row dynamically which will contain a total of two or more rows in the HTML table

Whenever there are two rows or more rows in the form array another row should be added with the total.

This HTML table is dynamically generating the rows using ngFor over the array of objects.

Any suggestions.

Ali Rida · Accepted Answer · 2021-07-28 10:48:51Z

1

You can add a table row after the ngFor and add ngIf to check if the number of objects in the array is greater than or equal to 2 (To show the total)

Your html code will look like this:

<tr *ngFor="let object of objects">
   <td> {{object.field1}} </td>
   <td> {{object.field2}} </td>
   <td> {{object.field3}} </td>
   <td> {{object.field4}} </td>
</tr>
<tr *ngIf="showTotal()">
   <td>Total</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
</tr>

And in your .ts file:

showTotal(): boolean {
    return this.objects.length >= 2;
}

The row containing the total will be created only if the number of rows in the table (which is the number of objects) is greater than or equal to 2)

answered Jul 28, 2021 at 10:48

Ali Rida

3812 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Virender Thakur Over a year ago

and when to add those totals for each td.

Collectives™ on Stack Overflow

Add row dynamically in reactive from

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related