Difference between @Injectable and @Inject Decorators

In Angular, decorators play an important role in defining and managing dependencies within the application. Two commonly used decorators are @Injectable and @Inject. While they both relate to dependency injection, they serve different purposes and are applied to different elements within an Angular application.

What are @Injectable Decorators ?

@Injectable is a decorator in Angular used to mark a class as an injectable that allows it to be provided and injected as a dependency within other Angular components, services, or modules.

Syntax:

@Injectable({
  providedIn: 'root',
})
export class ServiceClass {
  constructor() {}
}

Features of @Injectable decorators

• Singleton Pattern: Creates a single instance of a service to be shared across the application.
• Reusability: Services are designed to encapsulate certain capabilities, making integration and reuse simple.
• Lazy Loading: Optimizes performance by loading services only when needed, reducing initial load times.

Steps to Create Angular Project

Step 1: Create a new Angular Project using the following command

ng new gfg-decorators

Step 2: Create a new service

ng generate service gfg

Folder Structure:

Dependencies:

 "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example:

// gfg.service.ts

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

@Injectable({
    providedIn: 'root'
})

export class GfgService {

    constructor() { }

    greetUser(user: string): string {
        return `Hello ${user} from GfgService`;
    }
}

We created a method greetUser(user: string), which accepts the username as a parameter and will return a greeting message with the username.

Output:

The '@Injectable' decorator makes no apparent changes to itself. Instead, it acts as a label in Angular, which means that a particular class can be assigned to other parts of the code. As a result, you won't get any output if you only use '@Injectable'. It's more like telling Angular "Hey, this class is there to be used elsewhere!"

What are @Inject Decorators ?

@Inject is a decorator used to specify the token (dependency) to be injected into a class constructor or a provider definition. It specifies dependencies explicitly for Angular's DI system when automatic resolution is not possible, helping to resolve dependencies based on the specified token.

Features of @Inject decorators

• Decoupling: Enables dependencies and components to be coupled less tightly.
• Parameter Injection: Injecting dependencies into constructors or methods without relying on TypeScript's type inference.
• Clearer Intent: Enhances readability by indicating which dependencies are being injected into a component or service.

Syntax:

export class MyComponent {
  constructor(@Inject(ServiceClass) private myService: ServiceClass) {}
}

Now Create a new component:-

ng generate component gfgcomponent

Folder Structure:

Example:

<!-- gfgcomponent.component.html -->

<p>{{greetingMessage}}</p>

// gfgcomponent.component.ts

import { Component, Inject } from '@angular/core';
import { GfgService } from '../gfg.service';

@Component({
    selector: 'app-gfgcomponent',
    templateUrl: './gfgcomponent.component.html',
    styleUrls: ['./gfgcomponent.component.css']
})
export class GfgcomponentComponent {
    constructor(@Inject(GfgService) private gfgService: GfgService) { }

    greetingMessage = "";

    ngOnInit() {
        this.greetingMessage = this.gfgService.greetUser("GFGUser")
    }
}

• The GfgService is injected into the component using the @Inject decorator in the constructor.
• Next, we can use greetUser() method from GfgService, and we save the resultant greeting message in the greetingMessage variable.
• You can now access and see this welcome message in the HTML template of the component.

Output:

Difference between @Injectable and @Inject decorators

Conclusion

In summary, @Injectable is used to mark a class as injectable, that allows it to be managed by Angular's dependency injection system, while @Inject is used to specify the token (dependency) to be injected into a class constructor or a provider definition. Understanding the difference between these decorators is important for effectively managing dependencies and implementing dependency injection in Angular applications.