Inline editing in Angular 6 and Asp Net Core Application using ag-grid

In this tutorial, we are going to learn “how to implement inline editing in Angular 6 and Asp Net Core Application” in step by step. In-place editing or inline editing is very important for every application, because in inline editing, you don’t need to go separate page or any modal popup to update or edit the record. So, inline editing allows you edit or update record on the same page.

So, first of all, we will create a database (Model, Dto) and then we will make an API and then we will show a list of employees in an ag-grid with Angular 6 and then finally we will add some typescript code.

How to implement inline editing in Angular 6 application using ag-grid.

So, let’s start how to implement inline editing in Angular 6 and Asp Net Core application.

Note: – If you don’t know how to create a new project in Angular 6 using Asp Net Core, then click here.

Step # 1 – Add a Database.

In this step, we will create a database for our project. We will use code first approach to create a database. So, first-of-all, we will add a new model. So, follow the below steps.

Go to project folder and then create a new folder with the name of “Models” using this below command.

• mkdir Models

Now, right click on the models folder and then choose a “new C# class” and then enter a class name like this “Employee”. Then write the properties in the newly created model as you see in below file.

Note: – If you don’t see the “New C# Class” option from list, then you need to install C# extension.

Now, add an another class with the name of EmployeeDto and then add the properties as you see in the below code file.

Note:- If you don’t know how to add entity framework core, or how to install entity framework command line tool, or how to create a DbContext class, then click here below link.

Install entity framework in Angular 6 and Asp Net Core App

Note: – Don’t forget to add DbSet in DbContext class.

Now, in this step, we will add Employee’s table in our database using migration. So, to do it, just run this below command in terminal. This below command will create a new folder with the name of Migrations.

• Dotnet ef migartions add initialEmployees

Now, run this below command and this below command will apply all the migration to the database.

• Dotnet ef database update

Now, you can see you database will have table like this below.

Note: – In this tutorial i will use auto mapper. If you don’t know how to use auto mapper, then click here.

Step # 2 – Create an API

Now, in this step we will create an API. So, to do this, just go to folder structure => then right click on controllers folder => then choose a “New C# Class” => and then enter the name of the class like EmployeeController.cs. Then finally write the code as you see in the below file.

Step # 3 – Create a Service

Now, in this step, we will create a service for our project. So, go to project folder structure then go to App folder and then add a new folder with the name of services. Now just run this below command in your terminal to create a new service.

Note: – Make sure you are in the services folder.

• ng g service employee

This above command will create a new service. So, now write the code in your service as you see in the below file.

Step # 6 – Add ag-grid

In this step, we will install ag-grid in our application. So, now go to project folder structure and then open package.json file and then add these below three lines within dependencies.

• “ag-grid-angular”: “^19.1.2”,
• “ag-grid-community”: “^19.1.2”,
• “ag-grid-enterprise”: “^19.1.2”,

And then run this below command to install npm.

• npm install

Step # 5 – Add a component.

Now, in this step we will add a view part of our project and will create a new component. So, go to project folder structure and then go to App folder and then create a new component by running this below command.

• ng g component employee

 Now, you will see a folder in your project folder structure and that project folder will have four files.

Now, write the code in your employee.component.ts as you see in the below file.

Now, write the code in your employee.component.html in your file as your see in the below file.

Now, add a route of your application and then run this below command and then you will see the required output.

=> ng serve