Introduction

Here, we will learn about how we can dynamically add/remove rows of the grid using Angular 7. We have performed the same functionality with AngularJS also, you can refer to it from here.

Prerequisite

Let's get started

Open the Visual Studio code and open a new Terminal.
Dynamically Add And Remove Row In Angular 7
Type the following command in it.
  1. ng new dynamic-grid
Dynamically Add And Remove Row In Angular 7
We will also install the Bootstrap and Toaster as we are going to use it further.
  1. npm install bootstrap
  3. npm install ngx-toastr --save
Dynamically Add And Remove Row In Angular 7
Dynamically Add And Remove Row In Angular 7
Open the project in Visual Studio Code by opening the folder.
Dynamically Add And Remove Row In Angular 7
Choose the folder and open it.
Dynamically Add And Remove Row In Angular 7
Now it's time to create the component for the project, so open the terminal and type the following command,
  1. ng g c grid-view --routing
Dynamically Add And Remove Row In Angular 7
First, we will add the reference for bootstrap and toaster in the angular.json file.
Dynamically Add And Remove Row In Angular 7
Type the following command to generate the model file for the class.
  1. ng g class grid.model
Dynamically Add And Remove Row In Angular 7
We're all done with installation and project setup. Now we will code the project.
Open the app.module.ts file present in the root folder and add the references there.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { ToastrModule } from 'ngx-toastr';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { GridViewComponent } from './grid-view/grid-view.component';
  7. import { FormsModule } from '@angular/forms';
  8. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  10. @NgModule({
  11. declarations: [
  12. AppComponent,
  13. GridViewComponent,
  14. ],
  15. imports: [
  16. BrowserModule,
  17. AppRoutingModule,
  18. FormsModule ,
  19. BrowserAnimationsModule,
  20. ToastrModule.forRoot()
  21. ],
  22. providers: [],
  23. bootstrap: [AppComponent]
  24. })
  25. export class AppModule { }
Open app.component.html file and add the code in it.
  1. <div class="container">
  2. <app-grid-view></app-grid-view>
  3. </div>
Open the index.html file and add the reference for font-awesome.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>DynamicGrid</title>
  6. <base href="/">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="icon" type="image/x-icon" href="favicon.ico">
  10. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  11. </head>
  12. <body>
  13. <app-root></app-root>
  14. </body>
  15. </html>
Open the grid.model.ts file and add the class in it.
  1. export class DynamicGrid{
  2. title1:string;
  3. title2:string;
  4. title3:string;
  5. }
Open the grid-view.component.html file add the HTML code in it.
  1. <div class="container" style="margin-top: 5%">
  2. <table class="table table-striped table-bordered">
  3. <thead>
  4. <tr>
  5. <th>Action</th>
  6. <th>Title 1</th>
  7. <th>Title 2</th>
  8. <th>Title 3</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr *ngFor="let dynamic of dynamicArray; let i = index;">
  13. <td (click)="deleteRow(i)">
  14. <i class="fa fa-trash fa-2x"></i>
  15. </td>
  16. <td>
  17. <input [(ngModel)]="dynamicArray[i].title1" class="form-control" type="text" />
  18. </td>
  19. <td>
  20. <input [(ngModel)]="dynamicArray[i].title2" class="form-control" type="text" />
  21. </td>
  22. <td>
  23. <input [(ngModel)]="dynamicArray[i].title3" class="form-control" type="text"/>
  24. </td>
  25. </tr>
  26. <tr>
  27. <td (click)="addRow(i)">
  28. <i class="fa fa-plus fa-2x"></i>
  29. </td>
  30. </tr>
  31. </tbody>
  32. </table>
  33. </div>
Finally, write the below code for the grid-view.component.ts file.
  1. import { Component, OnInit } from '@angular/core';
  2. import { ToastrService } from 'ngx-toastr';
  3. import { DynamicGrid } from '../grid.model';
  5. @Component({
  6. selector: 'app-grid-view',
  7. templateUrl: './grid-view.component.html',
  8. styleUrls: ['./grid-view.component.css']
  9. })
  10. export class GridViewComponent implements OnInit {
  12. constructor(private toastr: ToastrService) { }
  14. dynamicArray: Array<DynamicGrid> = [];
  15. newDynamic: any = {};
  16. ngOnInit(): void {
  17. this.newDynamic = {title1: "", title2: "",title3:""};
  18. this.dynamicArray.push(this.newDynamic);
  19. }
  21. addRow(index) {
  22. this.newDynamic = {title1: "", title2: "",title3:""};
  23. this.dynamicArray.push(this.newDynamic);
  24. this.toastr.success('New row added successfully', 'New Row');
  25. console.log(this.dynamicArray);
  26. return true;
  27. }
  29. deleteRow(index) {
  30. if(this.dynamicArray.length ==1) {
  31. this.toastr.error("Can't delete the row when there is only one row", 'Warning');
  32. return false;
  33. } else {
  34. this.dynamicArray.splice(index, 1);
  35. this.toastr.warning('Row deleted successfully', 'Delete row');
  36. return true;
  37. }
  38. }
  40. }
Output
Dynamically Add And Remove Row In Angular 7
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.