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 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);     } } 

Answer 2

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;   }