Add HTTP Client

Chapter Objectives

• ✔️
  Add HTTP Client

  Learn how to add HTTP Client to communicate with the mock API server.

HttpClient Module

The HttpClientModule is a built-in Angular module that allows you to send HTTP requests to a server. It provides an HttpClient service that you can inject into your services to make HTTP requests.

🎓 Instructions

1. Import HttpClientModule in the src/app/app.module.ts file.

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

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

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

Tip

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 have 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.