In this section, we will learn how to make HTTP requests in Angular using the HttpClient module. This is a crucial part of any web application that needs to communicate with a backend server to fetch or send data.

1. HttpClient Module: The Angular module that provides a simplified API for HTTP requests.
2. HttpClient Methods: Methods such as get, post, put, delete, etc., used to perform HTTP operations.
3. Observables: Used to handle asynchronous data streams in Angular.

Before making HTTP requests, you need to import the HttpClientModule in your Angular application.

1. Import HttpClientModule:

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

2. Add HttpClientModule to AppModule:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       HttpClientModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

The HttpClient service is used to make HTTP requests. Let's start with a simple GET request to fetch data from a server.

1. Inject HttpClient in a Service:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private apiUrl = 'https://api.example.com/data';
   
     constructor(private http: HttpClient) { }
   
     getData(): Observable<any> {
       return this.http.get<any>(this.apiUrl);
     }
   }
   

2. Use the Service in a Component:

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-data',
     template: `
       <div *ngIf="data">
         <pre>{{ data | json }}</pre>
       </div>
     `
   })
   export class DataComponent implements OnInit {
     data: any;
   
     constructor(private dataService: DataService) { }
   
     ngOnInit(): void {
       this.dataService.getData().subscribe(response => {
         this.data = response;
       });
     }
   }
   

To send data to the server, you can use the post method.

1. Service Method for POST Request:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private apiUrl = 'https://api.example.com/data';
   
     constructor(private http: HttpClient) { }
   
     postData(data: any): Observable<any> {
       return this.http.post<any>(this.apiUrl, data);
     }
   }
   

2. Use the Service in a Component:

   import { Component } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-data',
     template: `
       <button (click)="sendData()">Send Data</button>
     `
   })
   export class DataComponent {
     constructor(private dataService: DataService) { }
   
     sendData(): void {
       const data = { name: 'Angular', version: '2+' };
       this.dataService.postData(data).subscribe(response => {
         console.log('Data sent successfully', response);
       });
     }
   }
   

It's important to handle errors that may occur during HTTP requests. You can use the catchError operator from RxJS.

1. Service Method with Error Handling:

   import { Injectable } from '@angular/core';
   import { HttpClient, HttpErrorResponse } from '@angular/common/http';
   import { Observable, throwError } from 'rxjs';
   import { catchError } from 'rxjs/operators';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private apiUrl = 'https://api.example.com/data';
   
     constructor(private http: HttpClient) { }
   
     getData(): Observable<any> {
       return this.http.get<any>(this.apiUrl).pipe(
         catchError(this.handleError)
       );
     }
   
     private handleError(error: HttpErrorResponse) {
       let errorMessage = 'Unknown error!';
       if (error.error instanceof ErrorEvent) {
         // Client-side errors
         errorMessage = `Error: ${error.error.message}`;
       } else {
         // Server-side errors
         errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
       }
       return throwError(errorMessage);
     }
   }
   

2. Component with Error Handling:

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-data',
     template: `
       <div *ngIf="data">
         <pre>{{ data | json }}</pre>
       </div>
       <div *ngIf="error">
         <p>{{ error }}</p>
       </div>
     `
   })
   export class DataComponent implements OnInit {
     data: any;
     error: string;
   
     constructor(private dataService: DataService) { }
   
     ngOnInit(): void {
       this.dataService.getData().subscribe(
         response => {
           this.data = response;
         },
         error => {
           this.error = error;
         }
       );
     }
   }
   

1. Objective: Create a service to fetch data from a public API and display it in a component.
2. Steps:
   • Create a new service called UserService.
   • Use the HttpClient to fetch data from https://jsonplaceholder.typicode.com/users.
   • Create a component called UserComponent to display the fetched data.

1. UserService:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   export class UserService {
     private apiUrl = 'https://jsonplaceholder.typicode.com/users';
   
     constructor(private http: HttpClient) { }
   
     getUsers(): Observable<any> {
       return this.http.get<any>(this.apiUrl);
     }
   }
   

2. UserComponent:

   import { Component, OnInit } from '@angular/core';
   import { UserService } from './user.service';
   
   @Component({
     selector: 'app-user',
     template: `
       <div *ngIf="users">
         <ul>
           <li *ngFor="let user of users">{{ user.name }}</li>
         </ul>
       </div>
     `
   })
   export class UserComponent implements OnInit {
     users: any;
   
     constructor(private userService: UserService) { }
   
     ngOnInit(): void {
       this.userService.getUsers().subscribe(response => {
         this.users = response;
       });
     }
   }
   

In this section, we learned how to make HTTP requests using the HttpClient module in Angular. We covered GET and POST requests, error handling, and provided a practical exercise to reinforce the concepts. In the next section, we will learn how to handle HTTP responses effectively.