Introduction

Here, we will learn about how we can dynamically add-remove row of the grid using Angular 7. We have performed the same functionality with AngularJS also, so if you want then you can refer it from here.

Prerequisite:

  • Basic knowledge of Angular 7
  • Any Editor likes Visual Studio Code
  • Angular CLI must be installed
  • Node JS must be installed

Let’s get started

Open the Visual Studio code and open a new Terminal.

dynamically-add-and-remove-row-in-angular-7-1

Type the following command in it.

ng new dynamic-grid

dynamically-add-and-remove-row-in-angular-7-2

We will also install the Bootstrap and Toaster as we are going to use it further.

npm install bootstrap
npm install ngx-toastr --save

dynamically-add-and-remove-row-in-angular-7-3

dynamically-add-and-remove-row-in-angular-7-4

Open the project in Visual Studio Code by opening the folder.

dynamically-add-and-remove-row-in-angular-7-5

Choose the folder and open it.

dynamically-add-and-remove-row-in-angular-7-6

Now its time to create the component for the project, so open the terminal and type the following command.

dynamically-add-and-remove-row-in-angular-7-7

ng g c grid-view --routing

First, we will add the reference for bootstrap and toaster in the angular.json file.

dynamically-add-and-remove-row-in-angular-7-8

Type the following command to generate the model file for the class.

dynamically-add-and-remove-row-in-angular-7-9

ng g class grid.model

All done with installation and project setup. Now we will code the project.

Open the app.module.ts file present at the root folder and add the references there.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ToastrModule } from 'ngx-toastr';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GridViewComponent } from './grid-view/grid-view.component';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    GridViewComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule ,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open app.component.html file and add the code in it.

<div class="container">
  <app-grid-view></app-grid-view>
</div>

Open the index.html file and add the reference for font-awesome.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DynamicGrid</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Open the grid.model.ts file and add the class in it.

export class DynamicGrid{   
    title1:string;
    title2:string;
    title3:string;
}

Open the grid-view.component.html file add the HTML code in it.

<div class="container" style="margin-top: 5%">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Action</th>
                <th>Title 1</th>
                <th>Title 2</th>
                <th>Title 3</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].title1" class="form-control" type="text" />
                </td>
                <td>
                  <input [(ngModel)]="dynamicArray[i].title2" class="form-control" type="text" />
                </td>
                <td>
                  <input [(ngModel)]="dynamicArray[i].title3" class="form-control" type="text"/>
                </td>
            </tr>
            <tr>
              <td (click)="addRow(i)">
                <i class="fa fa-plus fa-2x"></i>
              </td>
            </tr>
        </tbody>
    </table>
  </div>

Finally, write the below code for the grid-view.component.ts file.

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 = {title1: "", title2: "",title3:""};
      this.dynamicArray.push(this.newDynamic);
  }

  addRow(index) {  
      this.newDynamic = {title1: "", title2: "",title3:""};
      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;
      }
  }

}

Output:

output

Please give your valuable feedback/comments/questions about this article below. Please let me know how you like and understand this article and how I could improve it.
You can download the source code from here.