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

 In Angular, @Injectable and @Inject are decorators used for different purposes within the context of dependency injection (DI).

@Injectable()

The @Injectable() decorator is used to mark a class as a provider that can be injected into other classes (components, services, directives, etc.) via Angular's dependency injection system.

• Purpose: Indicates that the class is injectable and can have dependencies injected into its constructor.

• Usage: Applied to a class definition.

• Example:

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

@Injectable({

  providedIn: 'root'

})

export class DataService {

  // Service implementation

}

• Key Points:

  • Classes decorated with @Injectable() can have their dependencies injected via constructor injection.
  • @Injectable() can optionally specify providedIn: 'root' to make the service a singleton available throughout the application, or be provided in a specific module or component.
  • It enables Angular to create instances of the service when requested by other parts of the application.

@Inject()

The @Inject() decorator is used to specify a dependency injection token when the dependency's type cannot be inferred, or when you want to provide a custom token for DI.

• Purpose: Specifies a custom token for the DI system to resolve dependencies.

• Usage: Applied as a parameter decorator to a constructor parameter.

• Example:

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

constructor(@Inject('MyToken') private myService: MyService) {

  // Constructor logic

}

• Key Points:

  • @Inject() is used when you want to inject a dependency using a custom token other than the type itself.
  • It allows injecting dependencies by providing a string token or a class type token.
  • It helps Angular resolve the correct instance when there are multiple providers of the same type or when providing a non-class dependency (like a string or a configuration object).

Summary

• @Injectable() is used to decorate a class that is injectable via Angular's DI system, enabling dependency injection into its constructor.
• @Inject() is used to specify a dependency injection token, providing a way to inject dependencies by token rather than type, or for injecting non-class dependencies.

Together, @Injectable() and @Inject() facilitate Angular's powerful dependency injection mechanism, enabling modular, reusable, and testable code in Angular applications.