15

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) {
      }
    }
Sarvesh Yadav
  • 2,600
  • 7
  • 23
  • 40

2 Answers2

15

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) {
  }
}
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • 2
    Thanks @Thierry but Can You explain me Why We are using @Injectable() We directly Can export the class then why we are using @Injectable() ? – Sarvesh Yadav May 19 '16 at 06:28
  • 1
    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. – Thierry Templier May 19 '16 at 06:36
  • 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 – Kiwi Rupela Jan 10 '18 at 08:29
  • @ThierryTemplier Can you answer this one? https://stackoverflow.com/questions/65336962/whats-the-use-of-inject-in-dependency-injection – Alwaysblue Dec 17 '20 at 08:21
6

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

info2ankit
  • 283
  • 3
  • 8