In this blog we will learn how to add or remove rows dynamically based on input count in angular.
Open app.component.html file and add below code :
<div class="w-50"> <h2>Add And Delete Row Based On Count</h2> <input class="mt-2" name="number" [(ngModel)]="count" /> <table class="mt-3"> <thead> <tr> <td style="width: 100px;"><label>Action</label></td> <td style="width: 120px;"><label>First Name</label></td> <td style="width: 120px;"><label>Last Name</label></td> <td style="width: 420px;"><label>Email</label></td> </tr> </thead> <tbody> <tr *ngFor="let dynamic of dynamicArray; let i = index;"> <td> <button class="btn btn-danger" (click)="deleteRow(i)">Delete</button> </td> <td> <input style="width:120px" name="{{dynamic.firstName}}" [(ngModel)]="dynamic.firstName" type="text" /> </td> <td> <input style="width:120px" name="{{dynamic.lastName}}" [(ngModel)]="dynamic.lastName" type="text" /> </td> <td> <input style="width:250px" name="{{dynamic.emailAddress}}" [(ngModel)]="dynamic.emailAddress" type="email" /> </td> </tr> <tr> <td> <button class="btn btn-success m-2" (click)="addRow()">Add</button> </td> </tr> </tbody> </table> </div>
Open app.component.ts file and add below code :
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor() { } ngOnInit(): void { } dynamicArray: any[] = []; count: any newDynamic: any addRow() { for (let i = 1; i <= this.count; i++) { this.dynamicArray.push(`<td>${i}</td>`) } } deleteRow(index: any) { this.dynamicArray.splice(index, 1); } }
output :