Angular 7 CRUD with web API using Asp.Net Core

In this tutorial, we are going to learn Angular 7 CRUD with web API using Asp.Net Core with Entity Framework Core. We will use visual studio code to build this small application.

Previous Tutorials of Angular 7 and Asp.Net Core

• https://dotnetdetail.net/how-to-create-an-angular-7-and-asp-net-core-app-using-visual-studio-2017/
• https://dotnetdetail.net/how-to-upgrade-angular-6-app-to-angular-7-in-visual-studio-code/
• https://dotnetdetail.net/virtual-scrolling-and-drag-and-drop-in-angular-7-angular-latest-version/

What will you learn in this tutorial?

In this tutorial, you will learn lots of things as you see in the below list.

• Prerequisite of Angular 7 and Asp.Net Core application.
• How to setup Angular 7 and Asp.Net Core application?
• How to Create Database using entity framework?
• How to create components in Angular Application?
• How to set route in Angular 7 application?
• How to add services in Angular 7 application?
• How to add API Resources?
• How to use Automapper in Angular 7 and Asp.Net Core?
• How to create an API?

Prerequisite Angular 7 and Asp.Net Core application.

There are following some prerequisite of Angular 7 and Asp.Net Core application.

• .NET Core SDK
• Asp.Net 2.0.0
• Node.js and npm (Latest Version)
• Visual Studio Code
• Angular CLI(Command Line Interface)

Angular 7 CRUD operations using Asp.Net Core and entity framework

Let’s start to create Angular 7 and Asp.Net Core app using entity framework in step by step.

Step # 1 – Setup a new project

In this step, we will setup a project with the name of “Angular7Crud”.

Now, open visual studio code => then open command terminal => then run this command to create a new folder.

=> mkdir Angular7Crud

Now, go to inside Angular7Crud folder by running this below command.

=> cd Angular7Crud

Now, run this below command to create a new project.

=> dotnet new angular

Now, run this below command to install npm packages.

=> npm install -g @angular/cli

Note: – If you don’t have installed nodejs or npm, then click here to install.

So, you have created a simple angular 7 app. Now, run this below command to build this project.

=> dotnet run

Now, if you want to see the version of project, then run this below command and then you will see the output as you see in the below screenshot.

=> ng version

Step # 2 – Create a Database

In this step, we will create a new database with the name of Angular7CrudDb in step by step.

=> Create a model

In this step, we will create a model with the name of “Employee.cs”. So, run this below command to create a new folder with the name of “Models”.

=> mkdir Models

Now, right click on the Models folder and then choose “New C# Class” and then enter the name “Employee.cs”.

So, now write the properties as you see in the below code file.

=> Add Entity Framework Packages

Now, in this step, we will add entity framework core. So, run this below command in your terminal to install entity framework Core packages.

• dotnet add package Microsoft.EntityFrameworkCore.SqlServer
• dotnet add package Microsoft.EntityFrameworkCore.Design
• dotnet restore

=>  Install Entity Framework Command Line Tool

Now, in this step, we will install entity framework command line tools like Add-Migration and etc. So, go to project folder structure and then open “Angular7Crud.csproj” file and then add the code within the “<project></project>” element as you see in the below code file.

Now, run this below command to restore all the packages.

• dotnet restore

=> Create a DbContext Class

Now, in this step we will create a DbContext class for our project. So, create a new folder with the name of “EmployeeDb” by running this below command.

• mkdir EmployeeDb

So, now right click on EmployeeDb folder and then choose “New C# Class” and then enter the name “EmployeeDbContext” and then press enter button.

Now, open EmployeeDbContext class and then write the code as you see in the below file.

Now, add configure the DbContext class as a service for dependency injection in the startup.cs class.

Now, open startup.cs class and then add the below line code within the ConfigureServices method.

Note: – don’t forget to add reference libraries.Now, we need to add connection string. So, go to project folder structure and then open appsettings.json file and then add the connection string code just above the Logging as you see in the below code.

Now, we need to create a database using entity framework command line tools. So, open command terminal and then run these below command.

• dotnet ef migrations add initialCommit
• dotnet ef database update

Now, these above command will create a database as you see in the below screenshot.

Step # 3 – How to create components in Angular 7 Application?

In this step, we will create components for our project. So, this section belongs to view part of this application. So, we will create components using Angular CLI.

Now, add new file to your project folder structure with the name of “angular.json” and then write the code as you see in the below file.

Now, run this below command to install angular cli as a dev dependency.

• Npm install @angular/cli@latest –save-dev

Now, run these below command to go inside the components folder.

• cd ClientApp
• cd App
• cd Components

Now, run these below command one by one to create new components with the name of “Employee” and “EmployeeList”. After running these command, you will see two new folders within the components folder.

Note: – These above command will also import statements and will also declare within the declaration part in the app.shared.module.ts file.

• ng g component Employee
• ng g component EmployeeList

Now, go to project folder structure and then open Employee.component.html file and then write the code as you see in the below file.

Now, go to project folder structure and then open employeeList.component.html file and then write the code as you see in the below file.

Step # 4 – How to set route in Angular 7 application?

In this step, we will set route to our application. So, go to project folder structure => then open ClientApp folder => then app folder => and then open “app.shared.module.ts” => and then add route as you see in the below file code.

Step # 4 – How to add services in Angular 7 application?

So, now in this step we will add services for our project. So, go to project folder structure and then go to inside ClientApp and then go to inside app folder and then now run the below command to create new folder with the name of “services”.

• mkdir services

Now, go to inside services folder by running this below command.

• cd services

And then now run this below command to generate a new service.

• ng g service employee

Now, open services file and then write the code as you see in the below code file.

Step # 5 – How to add API Resources?

Now, go to project folder structure and then right click on controller folder and then add new folder and then enter the name like this “Resources”

Now, right click on the Resources folder  and then choose “New C# file” and then enter the name “EmployeeResource.cs”. Then copy all the fields from Employee.cs file and then paste them here in “EmployeeResource.cs” file.

Step # 6 – How to use Automapper in Angular 7 and Asp.Net Core?

Now, in this step, we will add automapper tool in our project. So, now run these below command to add packages for automapper.

• dotnet add package AutoMapper
• dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection –version 1.2.0
• dotnet restore

So, now go to startup.cs class and then add the below service for the dependency injection in ConfigureService method.

• AddAutoMapper();

So, now run this below command to create a new folder.

• mkdir Mapping

So, now right click on the Mapping folder and then choose “New C# Class” and then enter the name “MappingProfile” and then add the code as you see in the below file.

Step # 7 – How to create an API?

Go to folder structure and then right click on controllers and then choose “New C# Class” and then enter the name of the class “EmployeeController.cs”.

Step # 8 – Add Component Code

Now, in this step, we will write the code for both component.ts files. So, go to employee.component.ts file and then write the code as you see in the below file.

Now, open employeeList.component.ts file and then write the code as you see in the below file.

Now, run this “dotnet run” command in terminal and then you will see the output page. So, there you will see we have created a beautiful CRUD operations app using Angular 7 and Asp.Net Core.