Create and Consume ASP.Net Web API from an Angular 7 App

In previous blog, we have seen how to use HttpClientModule? In this blog, we will create and consume an ASP.Net Web API in Angular 7 App using HttpClientModule.

Table of Contents

To complete this implementation I have used Visual Studio 2017 to create an ASP.Net Web API and Visual Studio Code to create an Angular App.

How to create ASP.Net Web API?

1. Open Visual Studio 2017.

2. File->New->Project

3. Select Web from left side pane and ASP.Net Web Application from middle pane. (As shown in below screen.)

4. Now select Web API from next screen in Visual Studio 2017.

5. Once your project is ready. You may start writing your own code. To demonstrate this implementation, I have create a list of product to display.

You may also use below code written in Get() operation or you may use SQL or entity to get data from databases.

Read:- Angular Interview Questions

public IEnumerable<string> Get()

{

List<string> productName = new List<string>();

productName.Add(“Laptop”);

productName.Add(“TV”);

productName.Add(“Washing Machine”);

productName.Add(“Mobile”);

productName.Add(“Tablet”);

return productName;

}

6. Now, hit F5 to run your Web API. To test your API add /api/values to display data on browser.

7. To consume this Web API from Angular, we have to enable CORS in our API. To enable CORS, the very first step is to install AspNet.WebApi.Cors.

To do this, run below command in package manager console in Visual Studio 2017.

Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.7

8. Once the installation is done, we have to add EnableCors attribute to either a particular Action or to the Controller class.

[EnableCors(origins: “http://localhost:4200”, headers: “*”, methods: “*”)]

9. We have to enable cors in WebApiConfig file as well, as shown in below screen shot.

Once your Web API is ready, then run your API to see the result and keep the API running.

How to create Angular App?

1. To create an Angular App, open command prompt and type -> ng new myProject
This command will create a basic Angular App for you.

2. Now, create a new component by using below command. This component wil be used to consume and display data fetched from API.
ng g c /demo/apitest

This will create a new component in app->demo->apitest folder.

3. Open your root module. Generally, it is app.module.ts, import HttpClientModule from ‘@angular/common/http’

import {HttpClientModule} from ‘@angular/common/http’

4. Open apitest.component.ts file and inject HttpClient

import {HttpClient} from ‘@angular/common/http’;

5. Now, write below code in ApitestComponent class.

export class ApitestComponent implements OnInit {
productData;
constructor(private client:HttpClient) { }
ngOnInit() {
const url=“http://localhost:52606/api/values”;
this.client.get(url)
.subscribe(response=>
{
this.productData = response;
console.log(response);
}, err=>
{
console.log(“Service Not Found”);
})
}
}

6. Open apitest.component.html and write below code.

<h1>Product List</h1>
<div *ngFor=“let d of productData”>
<ul>
<li>
{{d}}
</li>
</ul>
</div>

You may now see the below output.

Hope, you like this blog. Please share the URL and to give feedback please write your comment below.

You may like other blogs –

MVC Tutorial
Web API Tutorial
CRUD Example with Angular
Building Blocks of Angular
Learn TypeScript

Interview Questions and Answers Series –

MVC Interview Questions and Answers
Web API interview questions and answers

Keep following – SharePointCafe.Net

Prev – Call API service from Angular App
Next – Pipes in Angular

How to create ASP.Net Web API?

How to create Angular App?

Related posts:

Leave a Comment Cancel reply