What is `HttpClient` in Angular?

1. What is `HttpClient`?

HttpClient is an Angular service used to communicate with backend servers through HTTP/HTTPS.

It is provided by:

import { HttpClient } from '@angular/common/http';

Using HttpClient, Angular can call an ASP.NET Core Web API and perform operations such as:

GET      → Read data
POST     → Create data
PUT      → Update data
PATCH    → Partially update data
DELETE   → Delete data

For your Angular + ASP.NET Core application:

Angular Component
       ↓
Angular Service
       ↓
HttpClient
       ↓
HTTP / HTTPS
       ↓
ASP.NET Core Web API
       ↓
Database

2. Simple Example

Suppose ASP.NET Core exposes this endpoint:

GET https://localhost:7001/api/products

Angular can call it using:

this.http.get<Product[]>(
  'https://localhost:7001/api/products'
);

Here:

http → HttpClient object
get() → HTTP GET request
Product[] → expected response type
URL → ASP.NET Core API endpoint

3. Full Simple Sample Program

We'll use a modern standalone Angular application.

`app.config.ts`

First, make HttpClient available to Angular's dependency-injection system.

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

`product.ts`

export interface Product {
  id: number;
  name: string;
  price: number;
}

`product.service.ts`

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Product } from './product';

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

  private http = inject(HttpClient);

  private apiUrl = 'https://localhost:7001/api/products';

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

`products.ts`

import { Component, inject, OnInit } from '@angular/core';
import { Product } from './product';
import { ProductService } from './product.service';

@Component({
  selector: 'app-products',
  standalone: true,
  templateUrl: './products.html'
})
export class Products implements OnInit {

  private productService = inject(ProductService);

  products: Product[] = [];

  ngOnInit(): void {

    this.productService.getProducts()
      .subscribe({
        next: (data) => {
          this.products = data;
        },
        error: (error) => {
          console.error('Error loading products:', error);
        }
      });

  }
}

`products.html`

<h2>Products</h2>

@for (product of products; track product.id) {

  <div>
    {{ product.name }} - ₹{{ product.price }}
  </div>

}

4. Code Explanation

The most important part is:

private http = inject(HttpClient);

Angular's Dependency Injection system gives our service an instance of HttpClient.

We can then use:

this.http

to make HTTP requests.

Calling the API

return this.http.get<Product[]>(this.apiUrl);

Suppose:

private apiUrl = 'https://localhost:7001/api/products';

Angular sends:

GET /api/products

to the ASP.NET Core application.

The API might return:

[
  {
    "id": 1,
    "name": "Laptop",
    "price": 75000
  },
  {
    "id": 2,
    "name": "Mouse",
    "price": 1200
  }
]

Angular receives this response as:

Product[]

5. Why `Observable<Product[]>`?

Notice this code:

getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>(this.apiUrl);
}

Angular's HttpClient methods return RxJS Observables.

The request is asynchronous.

Therefore, we don't write:

Product[]

as the method return type.

We use:

Observable<Product[]>

The component can subscribe to it:

this.productService.getProducts()
  .subscribe(data => {
    this.products = data;
  });

Think of it as:

getProducts()
     ↓
Observable<Product[]>
     ↓
subscribe()
     ↓
HTTP request sent
     ↓
ASP.NET Core processes request
     ↓
JSON response received
     ↓
next(data)
     ↓
products = data

6. `HttpClient` Methods

GET

Used to retrieve data.

getProducts(): Observable<Product[]> {
  return this.http.get<Product[]>(this.apiUrl);
}

Equivalent API:

GET /api/products

POST

Used to create data.

addProduct(product: Product): Observable<Product> {
  return this.http.post<Product>(
    this.apiUrl,
    product
  );
}

Equivalent:

POST /api/products

Angular automatically serializes the object into JSON for the request body in the normal JSON case.

PUT

Used to update an existing resource.

updateProduct(product: Product): Observable<void> {
  return this.http.put<void>(
    `${this.apiUrl}/${product.id}`,
    product
  );
}

Equivalent:

PUT /api/products/10

DELETE

Used to delete data.

deleteProduct(id: number): Observable<void> {
  return this.http.delete<void>(
    `${this.apiUrl}/${id}`
  );
}

Equivalent:

DELETE /api/products/10

7. Complete CRUD Service

A typical Angular service could therefore look like:

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Product } from './product';

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

  private http = inject(HttpClient);

  private apiUrl = 'https://localhost:7001/api/products';

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }

  getProduct(id: number): Observable<Product> {
    return this.http.get<Product>(
      `${this.apiUrl}/${id}`
    );
  }

  addProduct(product: Product): Observable<Product> {
    return this.http.post<Product>(
      this.apiUrl,
      product
    );
  }

  updateProduct(product: Product): Observable<void> {
    return this.http.put<void>(
      `${this.apiUrl}/${product.id}`,
      product
    );
  }

  deleteProduct(id: number): Observable<void> {
    return this.http.delete<void>(
      `${this.apiUrl}/${id}`
    );
  }
}

This maps naturally to ASP.NET Core:

Angular `HttpClient`	HTTP	ASP.NET Core
`http.get()`	GET	`[HttpGet]`
`http.post()`	POST	`[HttpPost]`
`http.put()`	PUT	`[HttpPut]`
`http.patch()`	PATCH	`[HttpPatch]`
`http.delete()`	DELETE	`[HttpDelete]`

8. Sending HTTP Headers

HttpClient can also send headers.

For example:

import { HttpHeaders } from '@angular/common/http';

const headers = new HttpHeaders({
  'Authorization': 'Bearer ' + token
});

return this.http.get<Product[]>(
  this.apiUrl,
  { headers }
);

The HTTP request becomes conceptually:

GET /api/products
Authorization: Bearer eyJhbGciOi...

This is important when communicating with protected ASP.NET Core APIs.

In real applications, authentication headers are commonly added using an HTTP interceptor rather than manually adding them to every API call.

9. Query Parameters

HttpClient can also send query-string parameters.

For example:

return this.http.get<Product[]>(
  this.apiUrl,
  {
    params: {
      category: 'Laptop',
      page: 1
    }
  }
);

This generates a request similar to:

GET /api/products?category=Laptop&page=1

ASP.NET Core could receive them using:

[HttpGet]
public IActionResult Get(
    string category,
    int page)
{
    // ...
}

10. Modern Angular vs Older Angular

This is an important interview point.

Modern standalone Angular

Use:

provideHttpClient()

Example:

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

Older NgModule-based Angular

Traditionally, applications imported:

HttpClientModule

For example:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {
}

So remember:

Older NgModule approach
        ↓
HttpClientModule

Modern standalone approach
        ↓
provideHttpClient()

For a new standalone Angular application, provideHttpClient() is the preferred configuration.

11. `HttpClient` vs `HttpClientModule`

These two are often confused.

`HttpClient`	`HttpClientModule`
Service	NgModule
Makes HTTP requests	Historically registered HTTP services
Used inside services/components	Imported into NgModule
`http.get()`	Older module-based setup
`http.post()`	Not used to make requests directly

Modern standalone configuration uses:

provideHttpClient()

and your application code injects:

HttpClient

12. Typical Architecture

Avoid placing every HTTP call directly inside components.

Instead:

Products Component
       ↓
ProductService
       ↓
HttpClient
       ↓
ASP.NET Core Web API
       ↓
Application Layer
       ↓
Infrastructure / EF Core
       ↓
SQL Server

For example:

Component

this.productService.getProducts();

Service

return this.http.get<Product[]>(this.apiUrl);

This keeps the responsibilities separated:

Component
    → UI logic

Service
    → API communication

HttpClient
    → HTTP communication

ASP.NET Core
    → Backend/business logic

Key Points

HttpClient is Angular's built-in service for making HTTP/HTTPS requests.
It is available from @angular/common/http.
It supports GET, POST, PUT, PATCH, DELETE, etc.
HttpClient methods normally return RxJS Observables.
Use provideHttpClient() in modern standalone Angular applications.
Older NgModule applications commonly used HttpClientModule.
HttpClient can send JSON bodies, headers and query parameters.
HTTP interceptors can centrally modify requests, such as attaching JWT tokens.
A common structure is:

Component
   ↓
Service
   ↓
HttpClient
   ↓
ASP.NET Core Web API

Interview Questions and Answers

1. What is `HttpClient` in Angular?

HttpClient is Angular's built-in service for communicating with backend servers using HTTP/HTTPS. It supports operations such as GET, POST, PUT, PATCH, and DELETE.

2. From which package is `HttpClient` imported?

import { HttpClient } from '@angular/common/http';

3. How do you configure `HttpClient` in modern standalone Angular?

Using:

provideHttpClient()

For example:

providers: [
  provideHttpClient()
]

4. What does `HttpClient.get()` return?

It returns an RxJS Observable.

Observable<Product[]>

5. How do you call an ASP.NET Core GET API?

return this.http.get<Product[]>(
  'https://localhost:7001/api/products'
);

6. How do you send data to an ASP.NET Core API?

Use post():

return this.http.post<Product>(
  this.apiUrl,
  product
);

7. What was used before `provideHttpClient()`?

NgModule-based Angular applications traditionally imported:

HttpClientModule

Modern standalone applications normally use:

provideHttpClient()

8. Where should `HttpClient` normally be used?

Usually inside an Angular service, with the component calling that service:

Component
   ↓
Service
   ↓
HttpClient
   ↓
Web API

9. Can `HttpClient` send JWT tokens?

Yes. JWT access tokens can be sent in the Authorization header, commonly through an HTTP interceptor.

10. What is the simplest interview definition?

HttpClient is Angular's built-in service for sending HTTP requests to backend APIs and receiving responses, typically as RxJS Observables.

What is HttpClient?

What is HttpClient in Angular?

1. What is HttpClient?

2. Simple Example

3. Full Simple Sample Program

app.config.ts

product.ts

product.service.ts

products.ts

products.html

4. Code Explanation

Calling the API

5. Why Observable<Product[]>?

6. HttpClient Methods

GET

POST

PUT

DELETE

7. Complete CRUD Service

8. Sending HTTP Headers

9. Query Parameters

10. Modern Angular vs Older Angular

Modern standalone Angular

Older NgModule-based Angular

11. HttpClient vs HttpClientModule

12. Typical Architecture

Component

Service

Key Points

Interview Questions and Answers

1. What is HttpClient in Angular?

2. From which package is HttpClient imported?

3. How do you configure HttpClient in modern standalone Angular?

4. What does HttpClient.get() return?

5. How do you call an ASP.NET Core GET API?

6. How do you send data to an ASP.NET Core API?

7. What was used before provideHttpClient()?

8. Where should HttpClient normally be used?

9. Can HttpClient send JWT tokens?

10. What is the simplest interview definition?

Keep Learning - More From This Category

What is `HttpClient` in Angular?

1. What is `HttpClient`?

`app.config.ts`

`product.ts`

`product.service.ts`

`products.ts`

`products.html`

5. Why `Observable<Product[]>`?

6. `HttpClient` Methods

11. `HttpClient` vs `HttpClientModule`

1. What is `HttpClient` in Angular?

2. From which package is `HttpClient` imported?

3. How do you configure `HttpClient` in modern standalone Angular?

4. What does `HttpClient.get()` return?

7. What was used before `provideHttpClient()`?

8. Where should `HttpClient` normally be used?

9. Can `HttpClient` send JWT tokens?