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
– user184994, Commented Nov 30, 2018 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
– DeborahK, Commented Nov 30, 2018 at 18:18

Lazar Ljubenović · Accepted Answer · 2018-11-30 18:03:32Z

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, 2018 at 18:03

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

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

1 Comment

felixo Over a year ago

But that is what I am doing! The <tr *ngIf="customer"> 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 <all-customers>(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").

Eliseo · Accepted Answer · 2018-12-01 14:08:43Z

0

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>

answered Dec 1, 2018 at 14:08

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Dynamically add row to table in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related