Inject HTTP Client

Chapter Objective

Inject HTTP Client into your Angular application.

The HttpClient service is a built-in Angular service that allows you to send HTTP requests to a server. As we already did with some services such as ActivatedRoute or **Router$$, we could inject it in a component.

But that’s a common bad practice to inject services in components! We want to keep oyur components as clean as possible, not to focus on the business logic, but on the UI. That’s why we’ll inject the HttpClient service in the TaskService service, not in a component.

1. 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);
   }

What you've learned

HttpClient is a built-in Angular service 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.