Post
Ask Question

CRUD Operations In Angular Using AG Grid With Web API And SQL

In this article, I'm going to perform CRUD operations in Angular 9 with Ag-Grid using Web API with the help of an example. And the backend is a SQL Server database. Here I am using Web API to provide data connectivity between the database and the front end application. On the UI side, I will use bootstrap and ag-grid to create a rich, interactive , device-independent user experience for building a beautiful UI
 
I'm using Visual Studio Code as a tool to build my application. If you don't have Visual studio code in your system then first you have to download and install. Here is Visual Studio Code download link:Download Visual Studio Code Editor
 
First, take a look at our output,
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 

Intruduction of Ag-Grid

 
ag-Grid is a fully-featured and highly customizable JavaScript data grid. It is providing outstanding performance, has no third-party dependencies and integrates smoothly with Angular as Angular Component. Check out documentation for complete detail about ag-grid.
 

Standard features of ag grid

  • Column Interactions (resize, reorder, and pin columns)
  • Pagination
  • Sorting
  • Row Selection
Prerequisites
  1. Visual studio
  2. Sql Server
  3. Node.js version > 10
  4. Angular 9
  5. Toastr(for display message)
  6. Visual studio code
  7. Bootstrap
  8. Ag-Grid 
Step 1: Create a database and table
 
Create a database. Open SQL Server and create a new database and table. As you can see from the following query, I have created a database table called User Details.
 
UserDetails
  1. CREATE TABLE [dbo].[userdetails]   
  2.   (   
  3.      [userid]   [INT] IDENTITY(1, 1) NOT NULL,   
  4.      [username] [VARCHAR](50) NULL,   
  5.      [emailid]  [VARCHAR](150) NULL,   
  6.      [gender]   [CHAR](20) NULL,   
  7.      [address]  [VARCHAR](500) NULL,   
  8.      [mobileno] [VARCHAR](15) NULL,   
  9.      [pincode]  [VARCHAR](10) NULL,   
  10.      CONSTRAINT [PK_UserDetails] PRIMARY KEY CLUSTERED ( [userid] ASC )WITH (   
  11.      pad_index = OFF, statistics_norecompute = OFF, ignore_dup_key = OFF,   
  12.      allow_row_locks = on, allow_page_locks = on) ON [PRIMARY]   
  13.   )   
  14. ON [PRIMARY]   
Note
You can choose the size of the column according to your requirement.
 
Step 2: Create a Web API Project

Now, we will create a Web API with the functionality of binding records from a database. Go to Visual Studio >> File >> New >> Project, and select Web Application. After that, click OK and you will see the templates. Select the Web API template.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click Ok
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click OK.
 
Step 3: Add ADO.NET Entity Data Model
 
Now, Select Models folder >> Right click >> Add >> New Item >> select Data in left panel >> ADO.NET Entity Data Model,
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click Add button
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click Next button
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Give server name of SQL server and its credential then select database and test connection then click ok button.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click Next button
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Select UserDetails table and click Finish button
 
Step 4: Add API controller logic
 
Go to the Controller folder in our API Application and right-click >> Add >> Controller >> Select Web API 2 Controller-Empty
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Click Add button
 
Now we will write the logic for performing CRUD operation. We will go to the controller class and set the routing to make it more user-friendly by writing the below code.
  1. using System;  
  2. using System.Linq;  
  3. using System.Web.Http;  
  4. using AngularAPI.Models;  
  5. namespace AngularAPI.Controllers {  
  6.     [RoutePrefix("Api/User")]  
  7.     public class UserAPIController: ApiController {  
  8.         AngularDBEntities objEntity = new AngularDBEntities();  
  9.         [HttpGet]  
  10.         [Route("GetUserDetails")]  
  11.         public IQueryable < UserDetail > GetUser() {  
  12.                 try {  
  13.                     return objEntity.UserDetails;  
  14.                 } catch (Exception) {  
  15.                     throw;  
  16.                 }  
  17.             }  
  18.             [HttpGet]  
  19.             [Route("GetUserDetailsById/{userId}")]  
  20.         public IHttpActionResult GetUserById(string userId) {  
  21.                 UserDetail objUser = new UserDetail();  
  22.                 int ID = Convert.ToInt32(userId);  
  23.                 try {  
  24.                     objUser = objEntity.UserDetails.Find(ID);  
  25.                     if (objUser == null) {  
  26.                         return NotFound();  
  27.                     }  
  28.                 } catch (Exception) {  
  29.                     throw;  
  30.                 }  
  31.                 return Ok(objUser);  
  32.             }  
  33.             [HttpPost]  
  34.             [Route("InsertUserDetails")]  
  35.         public IHttpActionResult PostUser(UserDetail data) {  
  36.                 string message = "";  
  37.                 if (data != null) {  
  38.                     try {  
  39.                         objEntity.UserDetails.Add(data);  
  40.                         int result = objEntity.SaveChanges();  
  41.                         if (result > 0) {  
  42.                             message = "User has been sussfully added";  
  43.                         } else {  
  44.                             message = "faild";  
  45.                         }  
  46.                     } catch (Exception) {  
  47.                         throw;  
  48.                     }  
  49.                 }  
  50.                 return Ok(message);  
  51.             }  
  52.             [HttpPut]  
  53.             [Route("UpdateEmployeeDetails")]  
  54.         public IHttpActionResult PutUserMaster(UserDetail user) {  
  55.                 string message = "";  
  56.                 if (!ModelState.IsValid) {  
  57.                     return BadRequest(ModelState);  
  58.                 }  
  59.                 try {  
  60.                     UserDetail objUser = new UserDetail();  
  61.                     objUser = objEntity.UserDetails.Find(user.UserId);  
  62.                     if (objUser != null) {  
  63.                         objUser.UserName = user.UserName;  
  64.                         objUser.EmailId = user.EmailId;  
  65.                         objUser.Gender = user.Gender;  
  66.                         objUser.Address = user.Address;  
  67.                         objUser.MobileNo = user.MobileNo;  
  68.                         objUser.PinCode = user.PinCode;  
  69.                     }  
  70.                     int result = objEntity.SaveChanges();  
  71.                     if (result > 0) {  
  72.                         message = "User has been sussfully updated";  
  73.                     } else {  
  74.                         message = "faild";  
  75.                     }  
  76.                 } catch (Exception) {  
  77.                     throw;  
  78.                 }  
  79.                 return Ok(message);  
  80.             }  
  81.             [HttpDelete]  
  82.             [Route("DeleteUserDetails")]  
  83.         public IHttpActionResult DeleteEmaployeeDelete(int id) {  
  84.             string message = "";  
  85.             UserDetail user = objEntity.UserDetails.Find(id);  
  86.             objEntity.UserDetails.Remove(user);  
  87.             int result = objEntity.SaveChanges();  
  88.             if (result > 0) {  
  89.                 message = "User has been sussfully deleted";  
  90.             } else {  
  91.                 message = "faild";  
  92.             }  
  93.             return Ok(message);  
  94.         }  
  95.     }  
  96. }  
Now, our API has been completed and as you may see from the above code, it has the functionality to add, replace, update, and delete records to the table.
 
Step 5: Install Angular CLI
 
Now we will install angular CLI through the below command. But before that just check Node and NPM installed or not. And also we are using Visual Studio code as writing Angular code for UI application so first, make sure it's installed. If you have not installed then go to this link for download.
 
Let's install CLI to open a cmd and run the following command to install 
 
npm install -g @angular/cli
 
Step 6: Create am Anguglar project

Now, open Visual Studio Code and create a project.
 
Open TERMINAL in Visual Studio Code and type the following syntax to create a new project. We name it aggriddemo.
 
ng new Aggriddemo
 
After that, hit ENTER. It will take a while to create the project.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Once created, the project should look like this.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Step 7: Check React dependency
 
Go to in package.json file and check to react dependency.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Step 8: Install Ag-Grid 
 
Let's install the ag-Grid NPM packages. Open new terminal and run the following command
 
npm install --save ag-grid-community ag-grid-angular
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
Open style.css and below themes
  1. @import 'ag-grid-community/dist/styles/ag-grid.css';  
  2. @import 'ag-grid-community/dist/styles/ag-theme-blue.css';  
Step 9: Install bootstrap
 
Now, we will install bootstrap to building a beautiful UI of our react application.
 
npm install bootstrap --save
 
Or
 
npm install react-bootstrap bootstrap
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Step 10: Install Toastr
 
We wil install toastr for displaying the rich and atractive UI message, so now go into terminal and type the following command:
 
 npm i ngx-toastr
 
Open Angular.json and add the below toastr.css path in style
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
Step 11: Create Components
 
Now, we can create some components to provide the UI.
 
I'm going to create a new component, User and Add User.
 
Go to the TERMINAL and go our Angular project location using the following command,
 
ng g c user
ng g c user/AddUser
 
CRUD Operations In Angular Using AG Grid With Web API And SQL

Step 12: Create Service
 
Now, we will create a service.
 
Open the TERMINAL and write the below command,
 
ng g s user
 
Press ENTER and you will see two service files.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
Step 13:Create a model class
 
Now, we create a class like model class.
 
Open TERMINAL and write the below command,
 
ng g class user 
  1. export class User {  
  2.     UserId: number;  
  3.     UserName: string;  
  4.     EmailId: string;  
  5.     Gender: string;  
  6.     Address: string;  
  7.     MobileNo: string;  
  8.     PinCode: string;  
  9. }  
Step 14: Create a User Registration Page
 
Now we will write our logic to create a user register..
 
Go inside the user folder and open add-user.component.html file and write the below code for designing user registration.
  1. <div class="container">  
  2.     <div class="row">  
  3.         <div class="col-md-8">  
  4.             <h1>  
  5.                 <span class="badge badge-dark" id="header">User Registration</span>  
  6.             </h1>  
  7.             <hr>  
  8.                 <form [formGroup]="userForm" (ngSubmit)="onSubmit()">  
  9.                     <div class="row">  
  10.                         <div class="col-md-4">  
  11.                             <label for="firstName">User Name:</label>  
  12.                         </div>  
  13.                         <div class="col-md-6">  
  14.                             <input type="text" class="form-control" formControlName="UserName">  
  15.                                 <div *ngIf="submitted && userForm.controls.UserName.errors" class="error">  
  16.                                     <div *ngIf="userForm.controls.UserName.errors.required">First name is required</div>  
  17.                                 </div>  
  18.                             </div>  
  19.                         </div>  
  20.                         <div class="row">  
  21.                             <div class="col-md-4">  
  22.                                 <label for="firstName">EmailId:</label>  
  23.                             </div>  
  24.                             <div class="col-md-6">  
  25.                                 <input type="text" class="form-control" formControlName="EmailId">  
  26.                                     <div *ngIf="submitted && userForm.controls.EmailId.errors" class="error">  
  27.                                         <div *ngIf="userForm.controls.EmailId.errors.required">EmailId is required</div>  
  28.                                     </div>  
  29.                                 </div>  
  30.                             </div>  
  31.                             <div class="row">  
  32.                                 <div class="col-md-4">  
  33.                                     <label for="firstName">Gender:</label>  
  34.                                 </div>  
  35.                                 <div class="col-md-6">  
  36.                                     <input type="email" class="form-control" formControlName="Gender">  
  37.                                         <div *ngIf="submitted && userForm.controls.Gender.errors" class="error">  
  38.                                             <div *ngIf="userForm.controls.Gender.errors.required">Gender is required</div>  
  39.                                         </div>  
  40.                                     </div>  
  41.                                 </div>  
  42.                                 <div class="row">  
  43.                                     <div class="col-md-4">  
  44.                                         <label for="firstName">Address:</label>  
  45.                                     </div>  
  46.                                     <div class="col-md-6">  
  47.                                         <input type="text" class="form-control" formControlName="Address">  
  48.                                             <div *ngIf="submitted && userForm.controls.Address.errors" class="error">  
  49.                                                 <div *ngIf="userForm.controls.Address.errors.required">Address is required</div>  
  50.                                             </div>  
  51.                                         </div>  
  52.                                     </div>  
  53.                                     <div class="row">  
  54.                                         <div class="col-md-4">  
  55.                                             <label for="firstName">Mobile:</label>  
  56.                                         </div>  
  57.                                         <div class="col-md-6">  
  58.                                             <input type="text" class="form-control" formControlName="MobileNo">  
  59.                                                 <div *ngIf="submitted && userForm.controls.MobileNo.errors" class="error">  
  60.                                                     <div *ngIf="userForm.controls.MobileNo.errors.required">Mobile number is required</div>  
  61.                                                 </div>  
  62.                                             </div>  
  63.                                         </div>  
  64.                                         <div class="row">  
  65.                                             <div class="col-md-4">  
  66.                                                 <label for="firstName">Pin Code:</label>  
  67.                                             </div>  
  68.                                             <div class="col-md-6">  
  69.                                                 <input type="text" class="form-control" formControlName="PinCode">  
  70.                                                     <div *ngIf="submitted && userForm.controls.MobileNo.errors" class="error">  
  71.                                                         <div *ngIf="userForm.controls.PinCode.errors.required">PinCode is required</div>  
  72.                                                     </div>  
  73.                                                 </div>  
  74.                                             </div>  
  75.                                             <div class="row">  
  76.                                                 <div class="col-md-4"></div>  
  77.                                                 <div class="col-md-4">  
  78.                                                     <button type="submit" class="btn btn-primary">Submit</button>     
  79.   
  80.                                                     <input type="button" class="btn btn-warning" (click)="Cancel()" value="Cancel">  
  81.                                                     </div>  
  82.                                                 </div>  
  83.                                             </form>  
  84.                                         </div>  
  85.                                     </div>  
  86.                                 </div>  
And now open add-user.component.ts and first import necessary library and then write the below code.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { UserService } from 'src/app/services/user.service';  
  3. import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';  
  4. import { Router } from '@angular/router';  
  5. import { ToastrService } from 'ngx-toastr';  
  6.   
  7. @Component({  
  8.   selector: 'app-add-user',  
  9.   templateUrl: './add-user.component.html',  
  10.   styleUrls: ['./add-user.component.css']  
  11. })  
  12. export class AddUserComponent implements OnInit {  
  13.   submitted: boolean= false;  
  14.   userForm: any;  
  15.     
  16.   constructor(private formBuilder: FormBuilder,private toastr: ToastrService,private userService: UserService,private router:Router) { }  
  17.   
  18.   ngOnInit(): void {  
  19.     this.userForm = this.formBuilder.group({  
  20.       "UserName": ["", Validators.required],  
  21.       "EmailId": ["", Validators.required],  
  22.       "Gender": ["", Validators.required],  
  23.       "Address": ["", Validators.required],  
  24.       "MobileNo": ["", Validators.required],  
  25.       "PinCode": ["", Validators.required]  
  26.     });  
  27.   }  
  28.   onSubmit() {  
  29.     this.submitted = true;  
  30.     if (this.userForm.invalid) {  
  31.       return;  
  32.     }  
  33.     this.userService.addUser(this.userForm.value)  
  34.       .subscribe( data => {  
  35.         this.toastr.success("success", data.toString());  
  36.         this.router.navigate(['users']);  
  37.       });  
  38.   }  
  39.   Cancel()  
  40.   {  
  41.     this.router.navigate(['users']);  
  42.   }  
  43. }  
 Open add-user.component.css and then write the below css code.
  1. md-card{  
  2.     width: 20em;  
  3. }  
  4. .error {  
  5.   color: red;  
  6. }  
  7. .row{  
  8.   padding: 7px;  
  9. }  
  10. .error-msg {  
  11.   display: block;  
  12.   position: absolute;  
  13.   font-size: 75%;  
  14.   bottom: -2em;  
  15. }  
  16. .mat-input-container {  
  17.   margin-bottom: .5em;  
  18. }  
  19. #header{  
  20.     width: 100%;  
  21. }  
Step 15: Create User details page with ag grid
 
Now we will do the functionality for binding the data using ag grid and perform update, delete, sorting, pagination etc 
 
Go inside the user folder and open user.component.html file and write the below code for designing user details page.
  1. <div class="container">  
  2.     <h2 class="header">AG Grid CRUD Operations Example in Angular</h2>  
  3.     <hr>  
  4.         <div class="row">  
  5.             <div class="col-md-8"></div>  
  6.             <div class="col-md-4">  
  7.                 <button class="btn btn-sm btn-success button" (click)="Add()">Add User</button>    
  8.   
  9.                 <button class="btn btn-sm btn-primary" (click)="editUser()">Edit User</button>    
  10.   
  11.                 <button class="btn btn-sm btn-danger" (click)="deleteUser()">Delete User</button>  
  12.             </div>  
  13.         </div>  
  14.         <br>  
  15.             <ag-grid-angular style="width: 100%; height: 200px;" class="ag-theme-blue" (gridReady)="onGridReady($event)"  
  16. [columnDefs]="columnDefs" [rowData]="users" rowSelection="single" pagination="true" paginationPageSize=5  
  17. ></ag-grid-angular>  
  18.         </div>  
Go inside the user folder and open user.component.ts file and write the below code logic to perform the operation.
  1. import {  
  2.     Component,  
  3.     OnInit  
  4. } from '@angular/core';  
  5. import {  
  6.     User  
  7. } from '../model/user';  
  8. import {  
  9.     ColDef,  
  10.     GridApi,  
  11.     ColumnApi  
  12. } from 'ag-grid-community';  
  13. import {  
  14.     UserService  
  15. } from '../services/user.service';  
  16. import {  
  17.     Router  
  18. } from '@angular/router';  
  19. import {  
  20.     ToastrService  
  21. } from 'ngx-toastr';  
  22. @Component({  
  23.     selector: 'app-user',  
  24.     templateUrl: './user.component.html',  
  25.     styleUrls: ['./user.component.css']  
  26. })  
  27. export class UserComponent implements OnInit {  
  28.     // row data and column definitions  
  29.     public users: User[];  
  30.     public columnDefs: ColDef[];  
  31.     // gridApi and columnApi  
  32.     private api: GridApi;  
  33.     private columnApi: ColumnApi;  
  34.     constructor(private userService: UserService, private router: Router, private toastr: ToastrService) {  
  35.         this.columnDefs = this.createColumnDefs();  
  36.     }  
  37.     ngOnInit() {  
  38.         this.userService.getUsers().subscribe(data => {  
  39.             this.users = data  
  40.         })  
  41.     }  
  42.     // one grid initialisation, grap the APIs and auto resize the columns to fit the available space  
  43.     onGridReady(params): void {  
  44.         this.api = params.api;  
  45.         this.columnApi = params.columnApi;  
  46.         this.api.sizeColumnsToFit();  
  47.     }  
  48.     // create column definitions  
  49.     private createColumnDefs() {  
  50.         return [{  
  51.             headerName: 'User Name',  
  52.             field: 'UserName',  
  53.             filter: true,  
  54.             enableSorting: true,  
  55.             editable: true,  
  56.             sortable: true  
  57.         }, {  
  58.             headerName: 'Email Id',  
  59.             field: 'EmailId',  
  60.             filter: true,  
  61.             editable: true,  
  62.             sortable: true  
  63.         }, {  
  64.             headerName: 'Gender',  
  65.             field: 'Gender',  
  66.             filter: true,  
  67.             sortable: true,  
  68.             editable: true,  
  69.             cellRenderer: '<a href="edit-user">{{email}}</a>'  
  70.         }, {  
  71.             headerName: 'Address',  
  72.             field: 'Address',  
  73.             filter: true,  
  74.             editable: true,  
  75.             sortable: true  
  76.         }, {  
  77.             headerName: 'Mobile',  
  78.             field: 'MobileNo',  
  79.             filter: true,  
  80.             editable: true  
  81.         }]  
  82.     }  
  83.     status: any;  
  84.     //Update user  
  85.     editUser() {  
  86.         debugger;  
  87.         const d = this.api.getEditingCells();  
  88.         if (this.api.getSelectedRows().length == 0) {  
  89.             this.toastr.error("error", "Please select a User for update");  
  90.             return;  
  91.         }  
  92.         var row = this.api.getSelectedRows();  
  93.         this.userService.updateUser(row[0]).subscribe(data => {  
  94.             this.toastr.success("success", data);  
  95.             this.ngOnInit();  
  96.         });  
  97.     }  
  98.     //Delete user  
  99.     deleteUser() {  
  100.         debugger;  
  101.         var selectedRows = this.api.getSelectedRows();  
  102.         if (selectedRows.length == 0) {  
  103.             this.toastr.error("error", "Please select a User for deletion");  
  104.             return;  
  105.         }  
  106.         this.userService.deleteUser(selectedRows[0].UserId).subscribe(data => {  
  107.             this.toastr.success("success", data);  
  108.             this.ngOnInit();  
  109.             this.api.refreshRows(null);  
  110.         });  
  111.     }  
  112.     Add() {  
  113.         this.router.navigate(['addUser']);  
  114.     }  
  115. }  
Step 16: Write logic of service for consuming  api
 
Now, open user.service.tsand first import necessary class and libraries and then make calls to the WebAPI methods.  
  1. import {  
  2.     Injectable  
  3. } from '@angular/core';  
  4. import {  
  5.     User  
  6. } from '../model/user';  
  7. import {  
  8.     HttpClient,  
  9.     HttpHeaders  
  10. } from '@angular/common/http';  
  11. import {  
  12.     Observable  
  13. } from 'rxjs';  
  14. @Injectable({  
  15.     providedIn: 'root'  
  16. })  
  17. export class UserService {  
  18.     apiUrl: string = "http://localhost:49850/Api/User/";  
  19.     constructor(private http: HttpClient) {}  
  20.     editUser(user: User) {  
  21.         return this.http.put(this.apiUrl + 'UpdateEmployeeDetails/', user);  
  22.     }  
  23.     getUsers(): Observable < User[] > {  
  24.         return this.http.get < User[] > (`${this.apiUrl}GetUserDetails`);  
  25.     }  
  26.     addUser(user: User): Observable < string > {  
  27.         const httpOptions = {  
  28.             headers: new HttpHeaders({  
  29.                 'Content-Type': 'application/json'  
  30.             })  
  31.         };  
  32.         return this.http.post < string > (`${this.apiUrl}/InsertUserDetails/`, user, httpOptions);  
  33.     }  
  34.     updateUser(user: User): Observable < string > {  
  35.         const httpOptions = {  
  36.             headers: new HttpHeaders({  
  37.                 'Content-Type': 'application/json'  
  38.             })  
  39.         };  
  40.         return this.http.put < string > (`${this.apiUrl}/UpdateEmployeeDetails/`, user, httpOptions);  
  41.     }  
  42.     deleteUser(userId: string): Observable < string > {  
  43.         const httpOptions = {  
  44.             headers: new HttpHeaders({  
  45.                 'Content-Type': 'application/json'  
  46.             })  
  47.         };  
  48.         return this.http.delete < string > (`${this.apiUrl}/DeleteUserDetails?id=` + userId, httpOptions);  
  49.     }  
  50. }  
Finally, our coding part also has been completed.
 
Step 17: Set CORS (Cross-Origin Resource Sharing)
 
Go to the Web API project.
 
Download a NuGet package for CORS. Go to NuGet Package Manager and download the following file.
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 
After that, go to the App_Start folder in Web API project and open WebApiConfig.cs class. Here, modify the Register method with the below code. 
 
Add namespace
  1. using System.Web.Http.Cors;  
After that, add the below code inside Register method.
  1. var cors = new EnableCorsAttribute("*", "*", "*");  
  2. config.EnableCors(cors);  
Step 18: Run
 
We have completed all needed code functionality for our CRUD operations. Before running the application, first, make sure to save your work.
 
Now, let's run the app and see how it works.
 
Open TERMINAL and write the following command to run the program.
 
ng serve -o
 
The output looks like the following image. It's a stunning UI created with CRUD operations.
 
User Registration Page
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
Click without fill data 
CRUD Operations In Angular Using AG Grid With Web API And SQL
User details Page 
 
CRUD Operations In Angular Using AG Grid With Web API And SQL
 

Conclusion

 
We have completed how to perform a CRUD operation in Angular 9 using Ag-Grid and Web Api for user details, update details, insert details, sorting, paging, filtering and deleting details of a user.
 
We have started by installing and creating the create-angular-app then used it to create our Angular project. Next, we have installed bootstrap in our application. After that we installed the ag grid to display user details with sorting etc and used the get(),post(),delete() and put() methods to to HTTP request.
 
I hope you will enjoy this article. You are always welcome to ask any query and leave a comment.


Similar Articles