What is the difference between @Inject vs constructor injection as normal parameter in Angular 2?

by

You really should only use @Inject for situations where the injectable token is not a class. If you are unfamiliar with what a token is, it is basically what Angular uses to recognize what to inject. For example

providers: [
  AuthService,
  { provide: Http, useValue: new CustomHttpImpl() }
]

Here we have two different providers, the AuthService and the CustomHttpImpl. With the AuthService the token is AuthService. This means that we inject AuthService, using obviously the AuthService type

constructor(private authService: AuthService) {}

With this constructor, Angular knows to look for the AuthService with the token AuthService.

In the second provider, we provide a CustomHttpImpl but this time we use the token Http. So we cannot inject CustomHttpImpl we need to inject Http, since that is the token

// this will actually be the CustomHttpImpl, not Angular's Http
constructor(private http: Http)

// error: No provider for CustomHttpImpl
constructor(private http: CustomHttpImpl)

So you can tell from this that the tokens are all classes, which is enough for Angular to figure out to how to inject.

But let’s say we have a String, or an Array of something we want to inject. We can’t tie that to any class token, so we need to create an artificial token

import { OpaqueToken } from '@angular/core';

let numbers = [ 1, 2, 3, 4 ];
let config = '{ "some": "json", "config": "data" }'

const NUMBERS = new OpaqueToken('app.numbers');
const CONFIG = new OpaqueToken('app.config');

Now we have tokens for the items we want to inject. When we configure the providers, we use those tokens, and when we inject, we @Inject(TOKEN)

providers: [
  { provide: NUMBERS, useValue: numbers },
  { provide: CONFIG, useValue: config }
]

constructor(@Inject(NUMBERS) numbers: number[], @Inject(CONFIG) config: string)

UPDATE

Now, with Angular 4, we should use InjectionToken rather than OpaqueToken

More Related Contents:

  1. Avoiding nesting subscriptions in Angular 2+?
  2. NgFor doesn’t update data with Pipe in Angular2
  3. How to determine previous page URL in Angular?
  4. How can I write data attributes using Angular?
  5. Repeat HTML element multiple times using ngFor based on a number
  6. How to get query parameters from URL in Angular 5?
  7. Use component in itself recursively to create a tree
  8. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  9. CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error
  10. Connect method DataSource is not emitting all paginated rows for MatTable
  11. Getting instance of service without constructor injection
  12. Angular2: Insert a dynamic component as child of a container in the DOM
  13. How to install a specific version of Angular with Angular CLI?
  14. How to trace routing in Angular 2?
  15. How to use Dependency Injection (DI) correctly in Angular2?
  16. Angular – What is the meanings of module.id in component?
  17. Create a reusable FormGroup
  18. Reactive Forms: How to add new FormGroup or FormArray into an existing FormGroup at a later point in time in Angular till v14
  19. Pass parameter into route guard
  20. Typescript dependency injection public vs private
  21. Merging http observables using forkjoin
  22. Subscribing to a nested Observable
  23. Angular 2 translation change language in application
  24. WARNING in budgets, maximum exceeded for initial
  25. How to return value inside subscribe Angular 4
  26. Angular 8 ng-build throwing MIME error with cordova
  27. Angular 2 | Directives Argument of type ‘{}’ is not assignable to
  28. Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  29. Firestore how to get the collection value from another collection document id is referenced
  30. Binding events when using a ngForTemplate in Angular 2

Leave a Comment