"How to Call .NET API from Angular Using HttpClient"

Introduction

Connecting Angular to a backend is essential for most real-world applications. In this article, we’ll walk through how to call a .NET Core Web API from Angular using HttpClient, handle the response, and display it in a component.

This is perfect for beginners and full-stack dev’s building Angular + .NET apps.

---

Step 1: Set Up Your .NET Core API

Let’s assume you already have an API in your .NET backend like this:

csharpCopyEdit[ApiController]
[Route("api/[controller]")]
public class EmployeeController : ControllerBase
{
    [HttpGet]
    public IActionResult GetEmployees()
    {
        var employees = new[]
        {
            new { Id = 1, Name = "Amit" },
            new { Id = 2, Name = "Sneha" }
        };

        return Ok(employees);
    }
}

Run the API using dotnet run or in Visual Studio — make sure it listens on a known port, like https://localhost:7010.

---

Step 2: Enable CORS in .NET API

In Startup.cs (or Program.cs for .NET 6+), add CORS to allow Angular to connect:

csharpCopyEditbuilder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp",
        policy => policy.WithOrigins("http://localhost:4200")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

app.UseCors("AllowAngularApp");

---

Step 3: Angular Service for API Calls

In Angular, generate a service:

bashCopyEditng generate service services/employee

In employee.service.ts:

tsCopyEditimport { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private apiUrl = 'https://localhost:7010/api/Employee';

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

---

Step 4: Call the Service in a Component

In your component (e.g., dashboard.component.ts):

tsCopyEditimport { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {

  employees: any[] = [];

  constructor(private employeeService: EmployeeService) {}

  ngOnInit() {
    this.employeeService.getEmployees().subscribe(data => {
      this.employees = data;
    });
  }
}

---

Step 5: Display Data in HTML

In dashboard.component.html:

htmlCopyEdit<h2>Employee List</h2>
<ul>
  <li *ngFor="let emp of employees">
    {{ emp.id }} - {{ emp.name }}
  </li>
</ul>

---

Common Errors & Fixes

---

Conclusion

Calling a .NET API from Angular is simple and powerful when done right. You now know how to:

• Setup a basic API in .NET

• Enable CORS

• Use Angular HttpClient to make the call

• Bind data in a component

This pattern can now be reused across your app — whether for login, reports, or dashboards.

Written By : Code Fixer

---