Dynamically add row to table in Angular

Question

I have a table and would like to dynamically add a row to that table. Below is my code!

<tr *ngIf="customer">
  <td>4</td>
  <td>
    <input type="text" name="firstName" required minlength="2">
  </td>
  <td>
    <input type="text" name="lastName" required minlength="2">
  </td>
  <td>
    <input type="text" name="countryCode" required maxlength="2">
  </td>
  <td>
    <input type="number" name="age" required minlength="2">
  </td>
  <td>
    <i class="fas fa-times" (click)="cancel()"></i>
  </td>
  <td>
    <i class="far fa-save" (click)="save()"></i>
  </td>
</tr>

Below the table the above row should be added to. is the selector which holds the above html(the single table row to be added). Currently, when the button is clicked, the above row appears at the very bottom of the page instead of being added to the table as intended.

<table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Country</th>
            <th scope="col">Gender</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let customer of customerArray; let i = index">
            <td>{{i + 1}}</td>
            <td>{{customer.firstName}}</td>
            <td>{{customer.lastName}}</td>
            <td>{{customer.countryCode}}</td>
            <td>{{customer.gender}}</td>
            <td>{{customer.age}}</td>
            <td><i class="fas fa-edit" (click)="editCustomer()"></i></td>
            <td><i class="fas fa-trash-alt" (click)="deleteCustomer(customer)"></i></td>
          </tr>
          <add-edit-customer></add-edit-customer>
        </tbody>
      </table>

Just pushing a new customer into `cutomerArray` should add a new row? — user184994, Nov 30 '18 at 18:02
If you use the view source feature or the developer tools elements tab you'll see the HTML resulting from your view. You'll notice that the nested element (add-edit-customer) interferes with the layout of the table. Your best bet is to follow the recommendations provided here to add to your `customerArray`. — DeborahK, Nov 30 '18 at 18:18

score 6 · Answer 1 · answered Nov 30 '18 at 18:03

6

Angular is a framework whose main purpose is to update the view when the model changes. The templates represent a simple way to "teach" Angular how the actual DOM should be updated (at runtime of the app) whenever a change in your model happens.

Your rows are rendered by reading from the customerArray.

<tr *ngFor="let customer of customerArray; let i = index">

To add another row, simply add another object to customerArray, and Angular will handle updating the view on its own.

answered Nov 30 '18 at 18:03

Lazar Ljubenović

18,976
10
56
91

But that is what I am doing! The is activated when a button is clicked that creates a customer object, and also creates the table row. My problem is, the corresponding row that is created is not add to the (which is where the table is) component but all the way at the end of it. So I want to be able to dynamically add the row to that table, as part of that table in the HTML DOM, kind of like injecting a row(that is in one component "add-edit-customer") to a table(in another component "all-customers"). – felixo Nov 30 '18 at 22:46

score 0 · Answer 2 · answered Dec 01 '18 at 14:08

from Angular2 : render a component without its wrapping tag

If you want to add a tr into the table your component can be like

@Component({
  selector: '[add-edit-customer]',  //<--see you enclosed the name by []
  template: `<td><input ...></td>  //see you don't include tr tag
             <td><input ...></td>`
})

And your .html

<tbody>
   <tr *ngFor="let customer of customerArray; let i = index">
      <td>{{i + 1}}</td>
      ...
   </tr>
   <!-- see that add-edit-customer is a especial "tr"-->
   <tr add-edit-customer></tr>
</tbody>

Dynamically add row to table in Angular

2 Answers2