Angular ASP.NET Core MS-SQL Visual Stidio Code Visual Studio Web API

Learn ASP.NET Core WEB API With Angular 5 Using ngFor


In this article, we will learn ASP.NET Core web API with angular 5 data binding using with ngFor.
• Create SQL Server Database
• Create Web API with ASP.NET Core
• Install Entity Framework
• Create angular 5 Application
• Data Binding Using with ngFor

Create SQL Server Database:
Open your SQL Server, Click New Query window & Run the below SQL script, it will create new table & insert some data.

SQL Script

Create Web API with ASP.NET Core:

Open Visual Studio 2017

Go to New menu >Click New & Project. Now it will open New Project Window

You can select ASP.NET Core Web Application. Enter the name of project in “Solution name” textbox then click OK button.

One more Window will be appearing. Select .Net Core with ASP.NET Core 2.0 Web API in this popup & Click OK button

Some list will be opened in the solution Explorer

.Net Core is cross platform  development framework.So we can make application for Mac,Linux & Windows Operating Systems

Install Entity Framework:

Run the below commands in NuGet Package Manger > Package Manger Console. It will be using some Entity Framework tools to create a model from the Database and ASP.NET Core Scaffolding tools to create a Controllers and Views.

Now we want to create the Entity Framework model based on your created database. So that run the this command in Package Manger Console

Once you will be done on console, Model will be created like below the screen

Now Services are automatically registered with Dependency Injection on application startup. You want to remove the inline context configuration from DBFirstContext.cs

Add the below Constrictor line for it will allow configuration to be passed into the context Dependency Injection

Then we will register this service in startup.cs. So the following Header & Services Code to be added in the existing lines

We want to change the Origin URL allowed to access. So that replaces the following methods in the startup.cs file. Because we can avoid “Access-Control-Allow-Origin” issue

This method gets called by the run-time. Use this method to configure the HTTP request pipeline.

Right click on Controllers > Add New Controller > Select API Controller with actions, using Entity Framework

Once Click to Add Button, One more popup will open and it will be loaded the all the Table model on model class & all Database Context will be loaded in the Data context class. If you need change the controller name

Now Run the Application (Click IIS Express (Play)) & ASP.NET Core Web API has been read for any of the application. We are going to use angular application.

Create angular 5 Application

Open the Visual Studio Code. If you want to install VS Code, Click Here. Then make sure that if you installed node JS else Click Here.

Go to Terminal & Run below the line for installing Angular Cli.

It will take few minutes for setup installation.

Once it will complete, we will import Angular Service Module in app.component.js & Accessing the ASP.NET Core Web API using Http get function

Change the compiler options to be false in tsconfig.json file.

We can test your Web API over the Google ARC Tools & some data has been returned.

This Json Data will load to the html page using angular *ngFor

Run the ng serve command in the VS Code Terminal. After executed this line open your browser on http://localhost:4200/



You must know about those difference:

  • GET requests can be bookmarked & requests have length restrictions

  • POST requests cannot be bookmarked & have no restrictions on data length


In this article, we have learned ASP.NET Core web API with angular 5 data binding using with ngFor. If you have any queries, please tell me through the comments section because your comments are very valuable.

Happy Coding!…


  • ravi chandran

    Good one .very Much usefuf

    • Thiruppathi Rengasamy

      Thanks Ravi

Show Buttons
Hide Buttons