What is the difference between @Inject and @Injectable in Angular 2 typescript

Question

I don\'t understand When to use @Inject and when to use @Injectable ?

  import {Component, Inject, provide} from \'@angular/core\';
    import {Hamburger} fr         


        

Answer 1

The @Injectable decorator aims to actually set some metadata about which dependencies to inject into the constructor of the associated class. It's a class decorator that doesn't require parameters. Without this decorator no dependency will be injected...

@Injectable()
export class SomeService {
  constructor(private http:Http) {
  }
}

The @Inject decorator must be used at the level of constructor parameters to specify metadata regarding elements to inject. Without it, the type of parameters is used (obj:SomeType is equivalent to @Inject(SomeType) obj).

@Injectable()
export class SomeService {
  constructor(@Inject(Http) private http:Http, @Inject('sometoken') obj) {
  }
}

Answer 2

You must read this difference- @Inject and @Injectable

@Inject()

is a manual mechanism for letting Angular know that a parameter must be injected.

When using TypeScript, @Inject is only needed for injecting primitives. For eg:

export class AppComponent {
  encryption = this.chatWidget.chatSocket.encryption;

  constructor(@Inject(ChatWidget) private chatWidget) { }
}

---

@Injectable()

lets Angular know that a class can be used with the dependency injector.

For eg:

@Injectable()
export class ChatWidget {
constructor(
    public authService: AuthService,
    public authWidget: AuthWidget,
    public chatSocket: ChatSocket) { }
}

In the above example Angular's injector determines what to inject into ChatWidget's constructor by using type information