Angular 4: What is advantage of injecting HttpClient

Question

Following Angular docs, HttpClient is injected into the app component. I saw on another guide that this was a "favorable" without explanation.

@Component(...)
export class MyComponent implements OnInit {

  results: string[];

  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/api/items').subscribe(data => {
      // Read the result field from the JSON response.
      this.results = data['results'];
    });
  }
}

On this I have some questions:

1) Where/How is the HttpClient actually instantiated?  Does `ng serve` handle this?
2) How could I inject a different instance if I needed to?

`I saw on another guide that this was a "favorable" without explanation` <= Please provide a source. Maybe you misread, it is favorable over `http` as `http` will be deprecated. — Igor, Oct 19 '17 at 19:02
Regarding 2, see https://stackoverflow.com/questions/38213995/angular2-di-initializing-multiple-different-instances-in-the-same-constructor . You will have hard time doing this with HttpClient because of the way it was designed. Usually a single instance of HttpClient is used. — Estus Flask, Oct 19 '17 at 20:22
Also regarding #2, see [Dependency Injection - When to use NgModule versus an application component](https://angular.io/guide/dependency-injection#when-to-use-ngmodule-versus-an-application-component). You can specify providers in your component and will have a new instance served for that component and it's children. — Douglas Ludlow, Oct 19 '17 at 22:53

mohsenmadi · Answer 1 · 2017-10-19T20:26:11.513

3

HttpClient/HttpClientModule introduced in ng 4.3+ are re-implementation of the Http/HttpModule. To mention one example feature, instead of mapping your GET result(s) into JSON and then digging into properties which may or may not exist, you can now cast the returned result into user-defined interface where results/errors are controlled. As an example, and after you update your cli and npm, make a project like the one in the image and see the titles in your browser! See, in your interface, you can pick and choose what you want mapped back.

edited Oct 19 '17 at 20:26

answered Oct 19 '17 at 20:11

mohsenmadi

2,277
1
23
34

1

this is so helpful! I have tried other examples with HttpClient and generics, but could not get data out of an array of results, but the forEach after the Subscribe does the trick. This works! – Wallace Howery Nov 16 '17 at 18:05

score 2 · Answer 2 · answered Oct 19 '17 at 19:05

Actually, HttpClient is an improved replacement for Http. They expect to deprecate Http in Angular 5 and remove it in a later version.

Or did you wonder why injecting it was "favorable"? You inject services. That's how services work in Angular.

As with the Http service, the HttpClient service is instantiated when the module that imports Http is loaded.

It is expected that there would only be one instance of this service. I'm not sure why you would want more than one?

score 2 · Answer 3 · answered Oct 19 '17 at 19:05

When you want to use a service (which is basically a TS class), you need to instantiate it first. That is what angular injector does for you automatically.

This approach is "favorable" because it will automatically lookup for service dependencies defined in its constructor.

Not sure about the second question - if you want to inject another instance of the same class (service), you would have to do it manually.

More info about angular dependency injection can be found in their docs:

https://angular.io/guide/dependency-injection

Thanks. Regarding second question, I guess I was just curious if there are situations where we wouldn't want angular to just handle everything under the hood. These docs are helpful, thanks — Adam Hughes, Oct 19 '17 at 19:28

Angular 4: What is advantage of injecting HttpClient

3 Answers3

Linked