Add And Remove Table Row Dynamically In Angular.

Here, we will learn about how we can dynamically add and remove table rows using VueJs.

Step 1: Create New App.

ng new angular-addremove

Step 2: Update ts file.

Add below code in src/app/app.component.ts.

import { Component, OnInit } from ‘@angular/core’;

selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
export class AppComponent implements OnInit {

rows:any = []

constructor() { }

ngOnInit(): void {

this.rows = [{

addRow() {
let row = {name: “”, email: “”,mobno:””};

deleteRow(index:any) {

this.rows.splice(index, 1);



Step 3: Update html file.

Add below code in src/app/app.component.html.

<h3 class=”text-primary” align=”center”>Add Remove Table Row Dynamically In Angular</h3>
<div class=”container”>
<div class=”panel-group”>
<div class=”panel panel-primary”>
<div class=”panel-body”>
<button (click)=”addRow()” class=”btn btn-primary pull-right” style=”cursor: pointer;”>Add</button><br>
<table class=”table table-bordered”>
<thead class=”text text-primary”>
<th>Mobile Number</th>
<tr *ngFor=”let row of rows; let i = index;”>
<input [(ngModel)]=”rows[i].name” class=”form-control” type=”text” />
<input [(ngModel)]=”rows[i].email” class=”form-control” type=”text” />
<input [(ngModel)]=”rows[i].mobno” class=”form-control” type=”text”/>
<td><button class=”btn btn-danger” (click)=”deleteRow(i)” style=’cursor: pointer;’>Remove</button></td>
<button class=”btn btn-info” (click)=”submit()”>Submit</button>

The post Add And Remove Table Row Dynamically In Angular. appeared first on PHPFOREVER.

Leave a Reply

Your email address will not be published. Required fields are marked *