Add HTTP Client

Chapter Objectives

• Add HTTP Client

  Learn how to add HTTP Client to your Angular application.

HttpClient Provider

The HttpClient is a built-in Angular service that allows you to send HTTP requests to a server. In Angular 20, we use the provideHttpClient function to configure the HTTP client in the application bootstrap.

1. Import provideHttpClient in the src/app/app.config.ts file.

    import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
    import { provideRouter } from '@angular/router';
   
    import {provideHttpClient} from '@angular/common/http';
   
   import { routes } from './app.routes';
   
   export const appConfig: ApplicationConfig = {
      providers: [
      provideBrowserGlobalErrorListeners(),
      provideZonelessChangeDetection(),
      provideRouter(routes),
   
      provideHttpClient()
      ]
    };

2. Inject the HttpClient service in the src/app/task-service.ts file.

   import { Injectable, inject } from "@angular/core";
   
   import { HttpClient } from "@angular/common/http";
   
   @Injectable({
     providedIn: "root",
   })
   export class TaskService {
   
     private http = inject(HttpClient);
   }

Note

Where to place the constructor line in an Angular class? The recommended practices for ordering elements in an Angular class are:

1. Variables
2. Constructor
3. Functions

What you've learned

HttpClientModule is a built-in Angular module that allows you to send HTTP requests to a server. It’s one of the first modules added to a real Angular application to communicate with a server. In the next chapters, we’ll use it to communicate with the mock API server to retrieve and update tasks.