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