HTTP – Angular

In Angular 17, the HttpClientModule is used to handle HTTP requests. This module simplifies HTTP communication with backend services via APIs, enabling your Angular application to interact with data sources. The HttpClient service is part of the @angular/common/http package and supports HTTP methods such as GET, POST, PUT, DELETE, etc.

1. Setting Up HttpClientModule

Step 1: Import HttpClientModule

To start using the HttpClient service in your Angular app, you must import HttpClientModule in your app module (app.module.ts).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // <-- Import HttpClientModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule // <-- Add it here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Basic Example of GET Request

Here’s an example of how to use HttpClient to fetch data from an API.

1. Create a Service (data.service.ts)
   The service is where you handle HTTP requests.

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

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

     private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Example API

     constructor(private http: HttpClient) { }

     // GET request to fetch posts
     getPosts(): Observable<any> {
       return this.http.get(this.apiUrl);
     }
   }

2. Using the Service in a Component (app.component.ts)
   Inject the DataService into your component and call the getPosts() method to fetch data.

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-root',
     template: `
       <h1>Posts</h1>
       <ul>
         <li *ngFor="let post of posts">{{ post.title }}</li>
       </ul>
     `
   })
   export class AppComponent implements OnInit {
     posts: any[] = [];

     constructor(private dataService: DataService) {}

     ngOnInit() {
       this.dataService.getPosts().subscribe(
         (data) => {
           this.posts = data;
         },
         (error) => {
           console.error('Error fetching posts:', error);
         }
       );
     }
   }

Explanation:

• The DataService contains an HttpClient.get() method to retrieve data from a URL (apiUrl).
• In AppComponent, getPosts() is called in ngOnInit() to fetch data once the component is initialized.
• The fetched data is then rendered in a list.

3. POST Request Example

Here’s how you can send data to an API using a POST request.

1. Modify the Service to Add a POST Request (data.service.ts)

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

   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

     constructor(private http: HttpClient) {}

     // POST request to send new post data
     createPost(postData: any): Observable<any> {
       return this.http.post(this.apiUrl, postData);
     }
   }

2. Using the Service in a Component for POST Request (app.component.ts)

   import { Component } from '@angular/core';
   import { DataService } from './data.service';

   @Component({
     selector: 'app-root',
     template: `
       <h1>Create Post</h1>
       <form (ngSubmit)="submitPost()">
         <input [(ngModel)]="newPost.title" placeholder="Title" name="title" required>
         <input [(ngModel)]="newPost.body" placeholder="Body" name="body" required>
         <button type="submit">Submit</button>
       </form>

       <h2>New Post Response</h2>
       <pre>{{ response | json }}</pre>
     `,
   })
   export class AppComponent {
     newPost = {
       title: '',
       body: '',
     };

     response: any;

     constructor(private dataService: DataService) {}

     submitPost() {
       this.dataService.createPost(this.newPost).subscribe(
         (res) => {
           this.response = res;
         },
         (error) => {
           console.error('Error creating post:', error);
         }
       );
     }
   }

Explanation:

• The createPost() method sends a POST request with the form data (newPost).
• After submitting the form, the response is displayed below the form.

4. Error Handling

When making HTTP requests, it’s important to handle potential errors. Angular provides the catchError operator from RxJS for this purpose.

Example: Adding Error Handling

1. Update the Service (data.service.ts)

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   import { Observable, throwError } from 'rxjs';
   import { catchError } from 'rxjs/operators';

   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

     constructor(private http: HttpClient) {}

     getPosts(): Observable<any> {
       return this.http.get(this.apiUrl).pipe(
         catchError((error) => {
           console.error('Error fetching posts:', error);
           return throwError(() => new Error('Failed to fetch posts'));
         })
       );
     }

     createPost(postData: any): Observable<any> {
       return this.http.post(this.apiUrl, postData).pipe(
         catchError((error) => {
           console.error('Error creating post:', error);
           return throwError(() => new Error('Failed to create post'));
         })
       );
     }
   }

2. Catch Errors in the Component

In your component, handle the error response from the HTTP service.

ngOnInit() {
  this.dataService.getPosts().subscribe(
    (data) => {
      this.posts = data;
    },
    (error) => {
      console.error(error.message);
    }
  );
}

5. HTTP Headers and Parameters

You can add HTTP headers and query parameters to your requests using HttpHeaders and HttpParams.

Example: Sending Headers and Query Parameters

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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  // GET with headers and params
  getPostsWithHeaders(): Observable<any> {
    const headers = new HttpHeaders({ 'Custom-Header': 'AngularApp' });
    const params = new HttpParams().set('userId', '1'); // Add query parameter

    return this.http.get(this.apiUrl, { headers, params });
  }
}

6. Handling Loading States

To improve user experience, you can show a loading spinner when the HTTP request is in progress.

Example: Displaying Loading Spinner

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Posts</h1>
    <div *ngIf="loading">Loading...</div>
    <ul *ngIf="!loading">
      <li *ngFor="let post of posts">{{ post.title }}</li>
    </ul>
  `
})
export class AppComponent implements OnInit {
  posts: any[] = [];
  loading = true;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts().subscribe(
      (data) => {
        this.posts = data;
        this.loading = false;
      },
      (error) => {
        console.error('Error fetching posts:', error);
        this.loading = false;
      }
    );
  }
}

Conclusion

• GET Requests: Use HttpClient.get() to retrieve data from an API.
• POST Requests: Use HttpClient.post() to send data to an API.
• Error Handling: Handle errors using catchError.
• Headers and Params: Send custom headers and query parameters in your requests.
• Loading States: Improve user experience by showing a loading spinner during HTTP calls.

The HttpClientModule in Angular 17 makes it easy to handle HTTP communications, enabling smooth integration between the frontend and backend APIs.