Post
Ask Question

Dynamically Add And Remove Rows In Angular 7

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

  • 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
 
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  
  2.    
  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';  
  9.   
  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="/">    
  7.     
  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';  
  4.   
  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 {  
  11.   
  12.   constructor(private toastr: ToastrService) { }  
  13.   
  14.   dynamicArray: Array<DynamicGrid> = [];  
  15.   newDynamic: any = {};  
  16.   ngOnInit(): void {  
  17.       this.newDynamic = {title1: "", title2: "",title3:""};  
  18.       this.dynamicArray.push(this.newDynamic);  
  19.   }  
  20.   
  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.   }  
  28.     
  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.   }  
  39.   
  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.


Similar Articles