What are Services in Angular?
💡 Concept Name
Services in Angular – Classes that provide specific functionality and are used for sharing logic across components via dependency injection.
📘 Quick Intro
Angular services are used to write reusable, business-specific logic that is not tightly coupled to the UI. Services make your code more modular and testable.
🧠 Analogy / Short Story
Think of a service like a shared kitchen in an office. Every employee (component) can use it to prepare meals (logic) without needing their own separate kitchen.
🔧 Technical Explanation
- 🔁 Angular services are plain TypeScript classes decorated with
@Injectable(). - 🔧 They are injected into components, directives, or other services using Angular’s DI system.
- 📦 Common use cases include data access, logging, and business logic.
- 🚀 Services can be provided globally (
providedIn: 'root') or locally in component metadata.
🎯 Purpose & Use Case
- ✅ Sharing data and logic across multiple components
- ✅ Making HTTP calls to REST APIs
- ✅ Managing application state
- ✅ Centralizing reusable logic like authentication
💻 Real Code Example
// src/app/services/logger.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class LoggerService {
log(message: string) {
console.log('LoggerService: ' + message);
}
}
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { LoggerService } from './services/logger.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(private logger: LoggerService) { }
ngOnInit() {
this.logger.log('App initialized');
}
}
❓ Interview Q&A
Q1: What is a service in Angular?
A: A service is a reusable class that encapsulates business logic and can be injected into components.
Q2: Why use services in Angular?
A: To separate concerns and share logic across components.
Q3: What is @Injectable() in Angular?
A: A decorator that marks a class as available for DI.
Q4: What does providedIn: 'root' mean?
A: It makes the service a singleton available throughout the app.
Q5: Can one service use another service?
A: Yes, services can be injected into each other.
📝 MCQs
Q1. What is the purpose of a service in Angular?
- To style components
- To fetch HTML
- To share logic across components
- To build pipes
Q2. Which decorator is used to define a service?
- @Service
- @Injectable
- @Provider
- @Component
Q3. Where should services ideally be created?
- Inside each component
- In main.ts
- In a separate folder like services/
- Inside node_modules
Q4. What does 'providedIn: root' do?
- Nothing
- Registers service locally
- Registers service at root injector level
- Deletes the service
Q5. Can a service be injected into another service?
- Yes
- No
- Only in modules
- Only in root
💡 Bonus Insight
Angular services promote DRY principles and make testing easier. Using services also enables lazy-loaded modules to have scoped instances if needed.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!