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} from '../services/hamburger'; 
    export class App {
       bunType: string;
       constructor(@Inject(Hamburger) h) {
         this.bunType = h.bun.type;
       }
     }

And..

  import {Injectable} from '@angular/core';
    import {Bun} from './bun';
    @Injectable()
    export class Hamburger {
      constructor(public bun: Bun) {
      }
    }

Malicious

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) {
  }
}

Runck

Thanks @Thierry but Can You explain me Why We are using @Injectable() We directly Can export the class then why we are using @Injectable() ? – Malicious

If you're free not to use the @Injectable decorator for an exported class. It will work unless you want to inject something in it... Without the decorator nothing will be injected in the corresponding instance of the exported class. – Runck

If I am exporting a class and import it into some module and use it in code constructor(example:Example) like this it will work fine i already test this. Then is it any reason to use @Injectable() before that class – Protolithic

@ThierryTemplier Can you answer this one? #65337462 – Onward

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

Lyman