How to Make HTTP Request in Angular: Simple Guide

In Angular, you make HTTP requests using the HttpClient service from @angular/common/http. You inject HttpClient into your component or service and call methods like get(), post(), etc., which return Observables you subscribe to for the response.

Syntax

To make an HTTP request in Angular, first import and inject HttpClient. Then use its methods like get(), post(), put(), or delete(). These methods return an Observable you subscribe to for the response.

• HttpClient: Angular service to make HTTP calls.
• get(url): Fetch data from the URL.
• post(url, body): Send data to the URL.
• subscribe(): Listen for the response asynchronously.

typescript

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

@Component({
  selector: 'app-example',
  template: ''
})
export class ExampleComponent {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      console.log(response);
    });
  }
}

Example

This example shows how to fetch user data from a public API and display it in the console. It demonstrates importing HttpClientModule, injecting HttpClient, making a GET request, and subscribing to the response.

typescript

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user-list',
  template: '<h2>User List</h2>'
})
export class UserListComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getUsers().subscribe(users => {
      console.log('Users:', users);
    });
  }

  getUsers(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

// In your app.module.ts, import HttpClientModule:
// import { HttpClientModule } from '@angular/common/http';
// @NgModule({ imports: [HttpClientModule] })

Output

Users: [ { id: 1, name: 'Leanne Graham', ... }, { id: 2, name: 'Ervin Howell', ... }, ... ]

Common Pitfalls

1. Forgetting to import HttpClientModule in your app module causes errors.
2. Not subscribing to the Observable means the request won't run.
3. Using Http from older Angular versions instead of HttpClient.
4. Not handling errors with catchError or error callback.

typescript

/* Wrong: Missing HttpClientModule import and no subscription */
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetch() {
  this.http.get('https://api.example.com/data'); // No subscribe, no request sent
}

/* Right: Import HttpClientModule and subscribe */
// In app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
@NgModule({ imports: [HttpClientModule] })
export class AppModule {}

// In component
fetch() {
  this.http.get('https://api.example.com/data').subscribe(data => {
    console.log(data);
  });
}

Quick Reference

Here is a quick summary of common HttpClient methods:

Method	Description
get(url)	Fetch data from the server
post(url, body)	Send data to the server
put(url, body)	Update existing data on the server
delete(url)	Remove data from the server
subscribe()	Listen for the response asynchronously

Key Takeaways

Always import HttpClientModule in your app module to use HttpClient.

Inject HttpClient and use its methods like get() or post() to make requests.

Subscribe to the Observable returned by HttpClient methods to execute the request.

Handle errors properly to avoid silent failures.

Use HttpClient methods matching your HTTP action for clear, maintainable code.