CODEWITHSUNDEEP
angularangular-reactive-forms
Virender Thakur
Virender Thakur

Reputation: 337

Add row dynamically in reactive from

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

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.

Upvotes: 1

Views: 368

Answers (1)

Ali Rida
Ali Rida

Reputation: 381

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)

Upvotes: 1

Related Questions