How to Make HTTP Requests in Angular: A Step-by-Step Guide

In the last lesson, we learned how to protect routes in Angular using guards. Guards help us control who can access certain parts of our app, which is crucial for security. Now, we’ll dive into another key part of web development: making HTTP requests. This lesson will teach you how to use Angular’s HttpClient to interact with REST APIs, fetch data, and handle errors.

When I first started working with Angular, I had to build a weather app that fetched real-time data from an API. I struggled with understanding how to make HTTP requests and handle the data that came back. But once I got the hang of HttpClient, it became much easier. Let me walk you through the steps I took to solve this problem.

What is HttpClient in Angular?

HttpClient is a built-in Angular service that lets you send HTTP requests to a server. It supports methods like GET, POST, PUT, and DELETE, which are the backbone of REST APIs. Unlike the old Http service, HttpClient uses Observables, which are a powerful way to handle async data.

For example, if you want to fetch a list of users from a server, you can use the GET method. Here’s a simple code snippet to show how it works:

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

constructor(private http: HttpClient) {}

getUsers() {
  return this.http.get('https://api.example.com/users');
}

In this example, the getUsers method sends a GET request to the server. The server responds with data, which is handled by the Observable returned by http.get.

Making GET Requests

GET requests are used to fetch data from a server. Let’s say you’re building a blog app and need to fetch a list of posts. Here’s how you can do it:

getPosts() {
  return this.http.get('https://api.example.com/posts');
}

You can subscribe to this method in your component to get the data:

this.getPosts().subscribe((data) => {
  console.log(data);
});

This code fetches the posts and logs them to the console. If the server returns an error, you can handle it using the error callback in the subscribe method.

Making POST, PUT, and DELETE Requests

POST requests are used to send data to a server. For example, if you want to add a new post to your blog app, you can use the POST method:

addPost(post: any) {
  return this.http.post('https://api.example.com/posts', post);
}

PUT requests are used to update existing data. For example, to update a post:

updatePost(postId: number, updatedPost: any) {
  return this.http.put(`https://api.example.com/posts/${postId}`, updatedPost);
}

DELETE requests are used to remove data. For example, to delete a post:

deletePost(postId: number) {
  return this.http.delete(`https://api.example.com/posts/${postId}`);
}

Error Handling in HTTP Requests

When working with APIs, errors can happen. For example, the server might be down, or the request might be invalid. Angular’s HttpClient makes it easy to handle errors. Here’s how you can do it:

this.getPosts().subscribe(
  (data) => {
    console.log(data);
  },
  (error) => {
    console.error('An error occurred:', error);
  }
);

In this example, if the GET request fails, the error message will be logged to the console. You can also show a user-friendly message on the screen.

Conclusion

In this lesson, we covered how to make HTTP requests in Angular using HttpClient. We learned how to use GET, POST, PUT, and DELETE methods to interact with REST APIs. We also explored how to handle errors using Observables. These skills are essential for building modern web apps that rely on real-time data.

If you’re ready to take your Angular skills to the next level, check out the next lesson on handling authentication and authorization. It will teach you how to secure your app and control who can access certain features. Don’t forget to practice what you’ve learned here by building a small project, like a to-do list app that uses an API to store tasks.