title: Dynamically add row to table in Angular
body: <p>I have a table and would like to dynamically add a row to that table. Below is my code!</p>
  
  <pre><code>&lt;tr *ngIf="customer"&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" name="firstName" required minlength="2"&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" name="lastName" required minlength="2"&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" name="countryCode" required maxlength="2"&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="number" name="age" required minlength="2"&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;i class="fas fa-times" (click)="cancel()"&gt;&lt;/i&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;i class="far fa-save" (click)="save()"&gt;&lt;/i&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th scope="col"&gt;#&lt;/th&gt;
              &lt;th scope="col"&gt;First&lt;/th&gt;
              &lt;th scope="col"&gt;Last&lt;/th&gt;
              &lt;th scope="col"&gt;Country&lt;/th&gt;
              &lt;th scope="col"&gt;Gender&lt;/th&gt;
              &lt;th scope="col"&gt;Age&lt;/th&gt;
              &lt;th scope="col"&gt;Edit&lt;/th&gt;
              &lt;th scope="col"&gt;Delete&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let customer of customerArray; let i = index"&gt;
              &lt;td&gt;{{i + 1}}&lt;/td&gt;
              &lt;td&gt;{{customer.firstName}}&lt;/td&gt;
              &lt;td&gt;{{customer.lastName}}&lt;/td&gt;
              &lt;td&gt;{{customer.countryCode}}&lt;/td&gt;
              &lt;td&gt;{{customer.gender}}&lt;/td&gt;
              &lt;td&gt;{{customer.age}}&lt;/td&gt;
              &lt;td&gt;&lt;i class="fas fa-edit" (click)="editCustomer()"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;&lt;i class="fas fa-trash-alt" (click)="deleteCustomer(customer)"&gt;&lt;/i&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;add-edit-customer&gt;&lt;/add-edit-customer&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>