Angular HTTP Client: Sending GET and POST Requests

In this section, we’ll continue using Angular’s HttpClient to send GET and POST requests. HttpClient is a powerful built-in Angular tool that simplifies communication with backend APIs. Before diving into request implementation, ensure you’ve already learned how to import HttpClientModule and configure HttpClient, as covered in the previous section.

Sending GET Requests

GET requests are typically used to retrieve data from the server. Below is a basic example of sending a GET request.

Example: Sending a GET Request

1. Ensure HttpClient is injected into your component.

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getData().subscribe(data => {
      console.log('GET Response:', data);
    });
  }

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

Code Explanation

• In this example, HttpClient is injected into the ExampleComponent.
• apiUrl holds the endpoint URL for the API request.
• Inside the ngOnInit lifecycle hook, we call getData(), which sends a GET request to the specified apiUrl.
• The getData() method returns an Observable, enabling us to process the response asynchronously.

Sending POST Requests

Unlike GET requests, POST requests are commonly used to send data to the server. Let’s examine how to send a POST request.

Example: Sending a POST Request

1. Ensure HttpClient is injected into your component.

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

@Component({
  selector: 'app-post-example',
  templateUrl: './post-example.component.html'
})
export class PostExampleComponent {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  submitData() {
    const payload = { name: 'John Doe', age: 30 };
    
    this.http.post(this.apiUrl, payload).subscribe(
      response => {
        console.log('POST Response:', response);
      },
      error => {
        console.error('POST Error:', error);
      }
    );
  }
}

Code Explanation

• As before, HttpClient is injected into PostExampleComponent.
• The submitData() method constructs a payload object and sends it via POST to the specified apiUrl.
• http.post() returns an Observable, allowing us to handle the response (or error) when it arrives.

Summary

In this section, we learned how to use Angular’s HttpClient to send GET and POST requests to backend services. Through practical code examples, we demonstrated how to initiate these requests and handle their responses. With this knowledge, you can now seamlessly integrate dynamic data interactions into your applications by communicating with backend APIs.

Next, we’ll explore how to handle HTTP responses—including success and error handling, as well as response data transformation. Stay tuned for the next section!