Fetch Data From Database Using ASP.NET Web API In Angular 6

Introduction

In this article, I will explain how to call ASP.NET web API in your Angular project step by step. You need to enable CORS in your web API and fetch data from web API. It is easy to call API in Angular.

Step 1

Open SQL server 2014 of your choice and create a table and insert some records.

CREATE TABLE [dbo].[Employee](
[Employee_Id] [int] IDENTITY(1,1) NOT NULL,
[First_Name] [nvarchar](50) NULL,
[Last_Name] [nvarchar](50) NULL,
[Salary] [money] NULL,
[Joing_Date] [nvarchar](50) NULL,
[Department] [nvarchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[Employee_Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step 2

Open Visual Studio 2017, click on New Project and create an empty web API application project.

Screenshot for creating new project 1

Fetch Data From Database Using ASP.NET Web API In Angular 6

After clicking on New Project, one window will appear. Select Web from the left panel, choose ASP.NET Web Application, give a meaningful name to your project, and then click on OK as shown in the below screenshot.

Screenshot for creating new project 2

After clicking on OK one more window will appear; choose empty, check on empty Web API checkbox then click on OK as shown in the below screenshot.

Screenshot for creating new project 3

After clicking OK, the project will be created with the name of WebAPICRUD_Demo.

Step 3

Add Entity Framework now. For that, right click on Models folder, select Add, then select New Item, then click on it.

Screenshot for adding entity framework 1

After clicking on a New item, you will get a window; from there, select Data from the left panel and choose ADO.NET Entity Data Model, give it the name MyModel (this name is not mandatory you can give any name) and click on Add.

Screenshot for adding entity framework 2

After you click on "Add a window", the wizard will open, choose EF Designer from the database and click Next.

Screenshot for adding entity framework 3

After clicking on Next a window will appear. Choose New Connection. Another window will appear, add your server name if it is local then enter a dot (.). Choose your database and click on OK.

Screenshot for adding entity framework 4

The connection will be added. If you wish to save connect as you want. You can change the name of your connection below. It will save connection in web config then click on Next.

Screenshot for adding entity framework 5

After clicking on NEXT another window will appear to choose database table name as shown in the below screenshot then click on Finish.

Entity framework will be added and the respective class gets generated under the Models folder.

Screenshot for adding entity framework 6

Following class will be added,

namespace WebAPICURD_Demo.Models
{
using System;
using System.Collections.Generic;
public partial class Employee
{
public int Employee_Id { get; set; }
public string First_Name { get; set; }
public string Last_Name { get; set; }
public Nullable<decimal> Salary { get; set; }
public string Joing_Date { get; set; }
public string Department { get; set; }
}
}

Step 4

Right click on Controllers folder, select Add, then choose Controller as shown in the below screenshot.

Screenshot 1

After clicking on the controller a window will appear to choose Web API 2 Controller-Empty, click on Add.

After clicking on Add, another window will appear with DefaultController. Change the name to EmployeeController then click on Add. EmployeeController will be added under Controllers folder. Remember don’t change the Controller suffix for all controllers, change only highlight, and instead of Default just change Home as shown in the below screenshot.

Complete code for controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebAPICURD_Demo.Models;
namespace WebAPICURD_Demo.Controllers
{
public class EmployeeController : ApiController
{
private EmployeeEntities _db;
public EmployeeController()
{
_db =new EmployeeEntities();
}
public IEnumerable<Employee> GetEmployees()
{
return _db.Employees.ToList();
}
}
}

Step 5

Now, enable CORS in the WebService app. First, add the CORS NuGet package. In Visual Studio, from the Tools menu, select NuGet Package Manager, then select Package Manager Console. In the Package Manager Console window, type the following command.

Install-Package Microsoft.AspNet.WebApi.Cors

This command installs the latest package and updates all dependencies, including the core Web API libraries.

Step 6

Open the file App_Start/WebApiConfig.cs. Add the following code to the WebApiConfig.Register method.

Add namespace

using System.Web.Http.Cors;

Add the following line of code,

EnableCorsAttribute cors = new EnableCorsAttribute("*","*","*");
config.EnableCors(cors);

Complete WebApiConfig.cs file code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace WebAPICURD_Demo
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
EnableCorsAttribute cors = new EnableCorsAttribute("*","*","*");
config.EnableCors(cors);
}
}
}

Step 6

Open Visual Studio Code and create a new Angular project.

ng new MyDemo

Compile your project

cd MyDemo

Open your project in the browser,

ng serve --open

Step 7

Install bootstrap in your project and import in style.css file,

npm install bootstrap –save

@import 'node_modules/bootstrap/dist/css/bootstrap.min.css';

Step 8

Open terminal create component,

ng g c employee-list

Step 9

Open app.module.ts file and import httpModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { AppComponent } from './app.component';
import { from } from 'rxjs';
import { EmployeeListComponent } from './employee-list/employee-list.component';
@NgModule({
declarations: [
AppComponent,
EmployeeListComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 10

Open employee-list component.ts file and add the following code,

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
constructor(private httpService: HttpClient) { }
employees: string[];
ngOnInit() {
this.httpService.get('http://localhost:52202/api/employee').subscribe(
data => {
this.employees = data as string [];
}
);
}
}

Step 11

open employee-list.component.html and add the following code,

<div class="container py-5">
<h3 class="text-center text-uppercase">List of Employees</h3>
<table class="table table-bordered table-striped">
<thead>
<tr class="text-center text-uppercase">
<th>Employee ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Salary</th>
<th>Joining Date</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let emp of employees">
<td>{{emp.Employee_Id}}</td>
<td>{{emp.First_Name}}</td>
<td>{{emp.Last_Name}}</td>
<td>{{emp.Salary}}</td>
<td>{{emp.Joing_Date}}</td>
<td>{{emp.Department}}</td>
</tr>
</tbody>
</table>
</div>

Step 12

Add your employee-list.component.html selector in app.component.html

<app-employee-list></app-employee-list>

Step 13

Run your project in browser.

Output

18 Comments

Join the conversation! Your thoughts help the community grow.

Guilherme Fortes3y ago
Can anyone help me with angular
Deepali Dubal6y ago
Below error i am facing such as "CS0246 The type or namespace name 'EmployeeEntities' could not be found (are you missing a using directive or an assembly reference?) WebAPICRUD_Demo"
- Farhan Ahmed6y ago
  Cursor over EmployeeEntities press ctrl . select namespace and hit enter. using WebAPICURD_Demo.Models; this is the namespace you have to add.
Harish Mech6y ago
Cros package is not installing in my visual studio please help
- Farhan Ahmed6y ago
  Install it from nuget packet. You should be connected to internet
Mordechay Tal6y ago
Why you wrote: this.employees = data as string []; and not just handling json object?
Siddharth Ashok Patro6y ago
Return _db.Employees.ToList(); What is the Employees coming from ?
- Farhan Ahmed6y ago
  Employees database table coming from database
Rahul M7y ago
Exactly what is this "EmployeeEntities _db"?
- Farhan Ahmed7y ago
  EmployeeEntities is a model name and _db is assign name of that model
anu ja7y ago
On Employee controller it is showing error on EmployeeEntities. how to clear error
Aigerim Iskakova7y ago
Farhan Ahmed, can you please explain me what does this part of code is doing ngOnInit() { this.httpService.get('http://localhost:52202/api/employee').subscribe( data => { this.employees = data as string[]; } ); I have errors in reading http://localhost:52202/api/employee
- Farhan Ahmed7y ago
  This is generated boiler plat code from cli it initialization when first load.
kiranmai t7y ago
Can you pls explain how routing will be done with this?
kiranmai t7y ago
How the routing and dataflow will done ? we written code in both VS CODE and VS, the how to run the application ?
Anu Radha7y ago
ON Employee controller it is showing error on EmployeeEntities. the type or namespace EmployeeEntities could not be found
Akhilesh Tripathi7y ago
Well written article.
Hamid Khan8y ago
Nice Explanation...…..