Angular 4 : How to dynamically add and delete rows in a table

Question

In my angular app, I have 3 inputs say - code, name and price. And there is a table that displays the user selection.

When I click on the add button, the selection from the dropdown should get populated to the table as,

Product     Price      Action
124578-ABC  100        <Delete Button>

When I click on the delete button, the corresponding row should get deleted. I tried doing this using jquery. But I want to know the angular way of doing it.

Answer 1

Try this:

grid-view-component.html

<div class="container" style="margin-top: 5%">    
        <table class="table table-striped table-bordered">    
            <thead>    
                <tr>    
                    <th>Action</th>    
                    <th>Nmae</th>    
                    <th>Email</th>    
                    <th>Phone</th>    
                </tr>    
            </thead>    
            <tbody>    
                 <tr *ngFor="let dynamic of dynamicArray; let i = index;">    
                  <td (click)="deleteRow(i)">    
                    <i class="fa fa-trash fa-2x"></i>    
                  </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].name" class="form-control" type="text" />    
                    </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].email" class="form-control" type="email" />    
                    </td>    
                    <td>    
                      <input [(ngModel)]="dynamicArray[i].phone" class="form-control" type="number"/>    
                    </td>    
                </tr>    
                <tr>    
                  <td (click)="addRow()">    
                    <i class="fa fa-plus fa-2x"></i>    
                  </td>    
                </tr>    
            </tbody>    
        </table>    
</div>  

grid-view-component.ts

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';  
import { DynamicGrid } from '../grid.model';

@Component({
  selector: 'app-grid-view',
  templateUrl: './grid-view.component.html',
  styleUrls: ['./grid-view.component.css']
})
export class GridViewComponent implements OnInit {

      constructor(private toastr: ToastrService) { }  

      dynamicArray: Array<DynamicGrid> = [];  
      newDynamic: any = {}; 

      ngOnInit(): void {  
          this.newDynamic = {name: "", email: "",phone:""};  
          this.dynamicArray.push(this.newDynamic);  
      }  

      addRow() {    
        this.newDynamic = {name: "", email: "",phone:""};  
          this.dynamicArray.push(this.newDynamic);  
          this.toastr.success('New row added successfully', 'New Row');  
          console.log(this.dynamicArray);  
          return true;  
      }  

      deleteRow(index) {  
          if(this.dynamicArray.length ==1) {  
            this.toastr.error("Can't delete the row when there is only one row", 'Warning');  
              return false;  
          } else {  
              this.dynamicArray.splice(index, 1);  
              this.toastr.warning('Row deleted successfully', 'Delete row');  
              return true;  
          }  
      }
} 

grid.model.ts

export class DynamicGrid{     
    name:string;  
    email:string;  
    phone:string;  
}

Answer 2

Just add two row with same field. one with same field will avoid fieldArray initially null and one with same Field for *ngFor like this

<table>

<tr>
</tr>

<tr *ngFor>
</tr>

</table>

Answer 3

Try like this :

In this example i just used textbox instead of your input types

table like

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let field of fieldArray; let i = index">
            <td>
                <input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
            </td>
            <td>
                <input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
            </td>
            <td>
                <input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
            </td>
            <td>
                <button class="btn btn-default"  type="button" (click)="deleteFieldValue(i)">Delete</button>
            </td>
        </tr>
        <tr>
            <td>
                <input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
            </td>
            <td>
                <input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
            </td>
            <td>
                <button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
            </td>
        </tr>
    </tbody>
</table>

typescript sample :

export class Component {
    private fieldArray: Array<any> = [];
    private newAttribute: any = {};

    addFieldValue() {
        this.fieldArray.push(this.newAttribute)
        this.newAttribute = {};
    }

    deleteFieldValue(index) {
        this.fieldArray.splice(index, 1);
    }
}