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:

JavaScript

// 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!”

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.

Table of Content

What are @Injectable Decorators ?
What are @Inject Decorators ?
Difference between @Injectable and @Inject decorators
Conclusion

Steps to Create Angular Project

Output:

Difference between @Injectable and @Inject Decorators

Similar Reads

Contact Us