Creating an injectable service in Angular
source link: https://www.geeksforgeeks.org/creating-an-injectable-service-in-angular/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
In Angular, services are a great way to share data, functionality, and state across different components in your application. Services are typically injected into components and other services as dependencies, making them easily accessible and maintainable. Mostly services are used to create functions that initiate HTTP calls.
What is an Injectable Service?
An injectable service in Angular is a TypeScript class decorated with the @Injectable()
decorator. This decorator provides metadata that allows Angular’s dependency injection system to create and manage instances of the service class. Injectable services play a fundamental role in Angular development as they provide a way to share functionality, data, and state across different parts of the application.
Syntax:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // or 'any' or specific module
})
export class MyService {
constructor() { }
// Service logic here
}
Steps to Create An Injectable Service:
Step 1: Setting Up Angular Project
Install Angular CLI globally (if not already installed)
npm install -g @angular/cli
Step 2: Create a new Angular project:
ng new injectible-service-demo
Step 3: Once the project is set up, navigate to the src/app directory. Inside it, create a new folder called “core”. Within the “core” folder, create another folder named “services”.
Step 4: Generate a new service using the angular cli after going into services folder using the below command:
ng generate service my-service
Folder Structure:
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"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.0",
"@angular/cli": "^17.3.0",
"@angular/compiler-cli": "^17.3.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
}
Example of Injectable Services in Angular
Code: Add the following codes in respective files.
HTML
<!-- app.component.html -->
<div>
<button (click)="addItem()">Add Item</button>
<ul>
<li *ngFor="let item of items">{{ item | json }}</li>
</ul>
</div>
JavaScriptJavaScript
Output:
Creating an injectable service – Angular
“This course was packed with amazing and well-organized content! The project-based approach of this course made it even better to understand concepts faster. Also the instructor in the live classes is really good and knowledgeable.”- Tejas | Deutsche Bank
With our revamped Full Stack Development Program: master Node.js and React that enables you to create dynamic web applications.
So get ready for salary hike only with our Full Stack Development Course.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK