CODEWITHSUNDEEP
angularhtml-table
felixo
felixo

Reputation: 1613

Dynamically add row to table in Angular

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>

Upvotes: 1

Views: 11197

Answers (2)

Eliseo
Eliseo

Reputation: 57919

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>

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19754

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.

Upvotes: 6

Related Questions