📘 Angular Services: Dependency Injection

🎯 Introduction

Welcome to this exciting tutorial on Angular Services with Dependency Injection! 🎉 In this guide, we’ll explore how TypeScript makes Angular’s dependency injection system incredibly powerful and type-safe.

You’ll discover how services can transform your Angular development experience. Whether you’re building web applications 🌐, managing data 📊, or creating reusable utilities 🛠️, understanding services and dependency injection is essential for writing robust, maintainable Angular code.

By the end of this tutorial, you’ll feel confident creating and injecting services in your own Angular projects! Let’s dive in! 🏊‍♂️

📚 Understanding Angular Services

🤔 What are Angular Services?

Angular services are like specialized helpers in your application 🎨. Think of them as the hardworking staff behind the scenes at a restaurant 🍽️ - while the waiters (components) interact with customers, the kitchen staff (services) prepare the food, manage inventory, and handle the complex operations.

In TypeScript terms, services are classes decorated with @Injectable() that provide specific functionality throughout your application. This means you can:

✨ Share data between components
🚀 Handle HTTP requests and API calls
🛡️ Manage application state
🔧 Provide reusable business logic

💡 Why Use Dependency Injection?

Here’s why developers love Angular’s dependency injection system:

Type Safety 🔒: TypeScript ensures you get the right service types
Better Testing 🧪: Easy to mock services for unit tests
Code Reusability 🔄: Share logic across multiple components
Loose Coupling 🤝: Components don’t need to know how services work

Real-world example: Imagine building a shopping app 🛒. With services, your cart component, product list, and checkout can all share the same cart service without duplicating code!

🔧 Basic Syntax and Usage

📝 Creating Your First Service

Let’s start with a friendly example:

// 👋 Hello, Angular Service!
import { Injectable } from '@angular/core';

// 🎯 The @Injectable decorator makes this a service
@Injectable({
  providedIn: 'root' // 🌟 This makes it available app-wide!
})
export class GreetingService {
  private message: string = "Welcome to TypeScript with Angular! 🎉";
  
  // 💡 Simple method to get greeting
  getGreeting(): string {
    return this.message;
  }
  
  // 🎨 Method to customize greeting
  setGreeting(newMessage: string): void {
    this.message = newMessage;
  }
}

💡 Explanation: The @Injectable() decorator tells Angular this class can be injected into other classes. The providedIn: 'root' makes it a singleton available throughout your app!

🎯 Injecting Services into Components

Here’s how to use your service in a component:

// 🏗️ Component that uses our service
import { Component, OnInit } from '@angular/core';
import { GreetingService } from './greeting.service';

@Component({
  selector: 'app-welcome',
  template: `
    <div class="welcome-container">
      <h1>{{ greeting }}</h1>
      <button (click)="changeGreeting()">Change Greeting 🎭</button>
    </div>
  `
})
export class WelcomeComponent implements OnInit {
  greeting: string = '';
  
  // 🎯 Inject the service through constructor
  constructor(private greetingService: GreetingService) {
    // TypeScript knows greetingService is GreetingService type! ✨
  }
  
  ngOnInit(): void {
    // 🚀 Use the service
    this.greeting = this.greetingService.getGreeting();
  }
  
  // 🎨 Change greeting when button clicked
  changeGreeting(): void {
    this.greetingService.setGreeting("Angular Services are awesome! 🚀");
    this.greeting = this.greetingService.getGreeting();
  }
}

💡 Practical Examples

🛒 Example 1: Shopping Cart Service

Let’s build something real - a shopping cart service:

// 🛍️ Define our product interface
interface Product {
  id: string;
  name: string;
  price: number;
  emoji: string; // Every product needs an emoji! 
  category: 'electronics' | 'clothing' | 'books';
}

// 🛒 Shopping cart service
@Injectable({
  providedIn: 'root'
})
export class ShoppingCartService {
  private items: Product[] = [];
  private cartSubject = new BehaviorSubject<Product[]>([]);
  
  // 🎯 Observable for components to subscribe to cart changes
  cart$ = this.cartSubject.asObservable();
  
  // ➕ Add item to cart
  addItem(product: Product): void {
    this.items.push(product);
    this.cartSubject.next([...this.items]); // 🔄 Notify subscribers
    console.log(`Added ${product.emoji} ${product.name} to cart!`);
  }
  
  // ➖ Remove item from cart
  removeItem(productId: string): void {
    this.items = this.items.filter(item => item.id !== productId);
    this.cartSubject.next([...this.items]);
  }
  
  // 💰 Calculate total with proper typing
  getTotal(): number {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
  
  // 📊 Get cart statistics
  getCartStats(): { itemCount: number; total: number; categories: string[] } {
    return {
      itemCount: this.items.length,
      total: this.getTotal(),
      categories: [...new Set(this.items.map(item => item.category))]
    };
  }
  
  // 🧹 Clear entire cart
  clearCart(): void {
    this.items = [];
    this.cartSubject.next([]);
    console.log("🛒 Cart cleared!");
  }
}

// 🎮 Using the service in a component
@Component({
  selector: 'app-product-list',
  template: `
    <div class="product-grid">
      <div class="cart-summary">
        🛒 Items: {{ cartStats.itemCount }} | Total: ${{ cartStats.total }}
      </div>
      <button (click)="addSampleProduct()">Add Sample Product 🎁</button>
    </div>
  `
})
export class ProductListComponent implements OnInit {
  cartStats = { itemCount: 0, total: 0, categories: [] as string[] };
  
  constructor(private cartService: ShoppingCartService) {}
  
  ngOnInit(): void {
    // 👀 Subscribe to cart changes
    this.cartService.cart$.subscribe(items => {
      this.cartStats = this.cartService.getCartStats();
    });
  }
  
  // 🎁 Add a sample product for demo
  addSampleProduct(): void {
    const sampleProduct: Product = {
      id: Date.now().toString(),
      name: "TypeScript Handbook",
      price: 29.99,
      emoji: "📘",
      category: 'books'
    };
    this.cartService.addItem(sampleProduct);
  }
}

🎯 Try it yourself: Add quantity tracking and discount calculation features!

🎮 Example 2: User Authentication Service

Let’s make authentication type-safe and fun:

// 👤 User interface for type safety
interface User {
  id: string;
  username: string;
  email: string;
  role: 'admin' | 'user' | 'moderator';
  avatar: string; // Emoji avatar! 
  isActive: boolean;
}

// 🔐 Authentication response
interface AuthResponse {
  success: boolean;
  user?: User;
  token?: string;
  message: string;
}

// 🛡️ Authentication service
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserSubject = new BehaviorSubject<User | null>(null);
  private isLoggedInSubject = new BehaviorSubject<boolean>(false);
  
  // 🎯 Observables for components
  currentUser$ = this.currentUserSubject.asObservable();
  isLoggedIn$ = this.isLoggedInSubject.asObservable();
  
  constructor(private http: HttpClient) {
    // 🔄 Check for existing session on service init
    this.checkExistingSession();
  }
  
  // 🚪 Login method with type safety
  async login(username: string, password: string): Promise<AuthResponse> {
    try {
      // 🎯 Mock API call (replace with real HTTP request)
      const response: AuthResponse = await this.mockLogin(username, password);
      
      if (response.success && response.user) {
        this.currentUserSubject.next(response.user);
        this.isLoggedInSubject.next(true);
        
        // 💾 Store token securely
        if (response.token) {
          localStorage.setItem('auth_token', response.token);
        }
        
        console.log(`🎉 Welcome back, ${response.user.username}! ${response.user.avatar}`);
      }
      
      return response;
    } catch (error) {
      console.error('🚨 Login failed:', error);
      return {
        success: false,
        message: 'Login failed. Please try again! 😔'
      };
    }
  }
  
  // 🚪 Logout method
  logout(): void {
    this.currentUserSubject.next(null);
    this.isLoggedInSubject.next(false);
    localStorage.removeItem('auth_token');
    console.log('👋 See you later! Logged out successfully');
  }
  
  // 🔍 Check if user has specific role
  hasRole(role: User['role']): boolean {
    const currentUser = this.currentUserSubject.value;
    return currentUser?.role === role || false;
  }
  
  // 🎯 Get current user (type-safe)
  getCurrentUser(): User | null {
    return this.currentUserSubject.value;
  }
  
  // 👤 Mock login for demo (replace with real API)
  private async mockLogin(username: string, password: string): Promise<AuthResponse> {
    // 🎭 Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 🎯 Mock successful login
    if (username === 'demo' && password === 'password') {
      return {
        success: true,
        user: {
          id: '1',
          username: 'demo',
          email: '[email protected]',
          role: 'user',
          avatar: '🧑‍💻',
          isActive: true
        },
        token: 'mock-jwt-token-123',
        message: 'Login successful! 🎉'
      };
    }
    
    return {
      success: false,
      message: 'Invalid credentials! 😔'
    };
  }
  
  // 🔄 Check for existing session
  private checkExistingSession(): void {
    const token = localStorage.getItem('auth_token');
    if (token) {
      // 🎯 Validate token and restore user session
      // This would typically involve an API call
      console.log('🔄 Restoring session...');
    }
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Service Hierarchical Injection

When you’re ready to level up, try hierarchical injection:

// 🎯 Feature-specific service with hierarchy
@Injectable({
  providedIn: 'root' // 🌟 Root level - singleton across app
})
export class GlobalConfigService {
  private config = {
    apiUrl: 'https://api.example.com',
    theme: 'light' as 'light' | 'dark',
    language: 'en'
  };
  
  getConfig() {
    return { ...this.config }; // 📋 Return copy to prevent mutation
  }
}

// 🏗️ Component-level service
@Injectable() // 🎯 No providedIn - will be provided at component level
export class ComponentSpecificService {
  constructor(private globalConfig: GlobalConfigService) {
    console.log('🎨 Component service created with config:', 
                this.globalConfig.getConfig());
  }
}

// 📦 Component providing its own service instance
@Component({
  selector: 'app-feature',
  providers: [ComponentSpecificService], // 🎯 Each instance gets its own service
  template: '<div>Feature component with its own service! 🚀</div>'
})
export class FeatureComponent {
  constructor(private componentService: ComponentSpecificService) {}
}

🏗️ Advanced Topic 2: Service Factories and Dynamic Injection

For the brave developers:

// 🏭 Service factory for dynamic configuration
export function createDynamicService(config: any): DynamicService {
  return new DynamicService(config);
}

// 🎯 Factory provider configuration
@NgModule({
  providers: [
    {
      provide: DynamicService,
      useFactory: createDynamicService,
      deps: [ConfigService] // 🔗 Dependencies for the factory
    }
  ]
})
export class FeatureModule {}

// 🎪 Multi-provider for plugin system
interface PluginService {
  name: string;
  execute(): void;
}

@Injectable()
export class PluginManager {
  constructor(
    @Inject('PLUGINS') private plugins: PluginService[] // 🔌 Inject all plugins
  ) {
    console.log(`🎮 Loaded ${plugins.length} plugins:`, 
                plugins.map(p => p.name));
  }
  
  runAllPlugins(): void {
    this.plugins.forEach(plugin => {
      console.log(`🚀 Running plugin: ${plugin.name}`);
      plugin.execute();
    });
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Circular Dependencies

// ❌ Wrong way - circular dependency nightmare!
@Injectable()
export class ServiceA {
  constructor(private serviceB: ServiceB) {} // 💥 ServiceB depends on ServiceA!
}

@Injectable()
export class ServiceB {
  constructor(private serviceA: ServiceA) {} // 💥 Creates circular dependency!
}

// ✅ Correct way - use a shared service or events!
@Injectable()
export class SharedDataService {
  private dataSubject = new BehaviorSubject<any>(null);
  data$ = this.dataSubject.asObservable();
  
  updateData(data: any): void {
    this.dataSubject.next(data);
  }
}

@Injectable()
export class ServiceA {
  constructor(private sharedData: SharedDataService) {}
  
  doSomething(): void {
    this.sharedData.updateData({ from: 'ServiceA', message: '🎉' });
  }
}

@Injectable()
export class ServiceB {
  constructor(private sharedData: SharedDataService) {
    // 👀 Listen to shared data changes
    this.sharedData.data$.subscribe(data => {
      if (data?.from === 'ServiceA') {
        console.log('🎯 ServiceB received:', data.message);
      }
    });
  }
}

🤯 Pitfall 2: Memory Leaks with Subscriptions

// ❌ Dangerous - subscriptions not cleaned up!
@Component({
  selector: 'app-leaky'
})
export class LeakyComponent implements OnInit {
  constructor(private dataService: DataService) {}
  
  ngOnInit(): void {
    this.dataService.data$.subscribe(data => {
      console.log(data); // 💥 This subscription never gets cleaned up!
    });
  }
}

// ✅ Safe - proper subscription management!
@Component({
  selector: 'app-safe'
})
export class SafeComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  
  constructor(private dataService: DataService) {}
  
  ngOnInit(): void {
    this.dataService.data$
      .pipe(takeUntil(this.destroy$)) // 🛡️ Auto-unsubscribe on destroy
      .subscribe(data => {
        console.log('✅ Safe subscription:', data);
      });
  }
  
  ngOnDestroy(): void {
    this.destroy$.next(); // 🧹 Clean up all subscriptions
    this.destroy$.complete();
  }
}

🛠️ Best Practices

🎯 Use TypeScript Interfaces: Define clear contracts for your services
📝 Provide Services at Right Level: Root for singletons, component for instances
🛡️ Handle Errors Gracefully: Always wrap service calls in try-catch
🎨 Use Meaningful Names: UserAuthService not AuthSvc
✨ Keep Services Focused: One responsibility per service
🔄 Use Observables: For reactive data that changes over time
🧹 Clean Up Subscriptions: Prevent memory leaks

🧪 Hands-On Exercise

🎯 Challenge: Build a Task Management Service System

Create a type-safe task management system with multiple services:

📋 Requirements:

✅ Task service for CRUD operations
🏷️ Category service for task organization
👤 User service for task assignment
📊 Analytics service for productivity tracking
🔔 Notification service for reminders
🎨 Each task needs an emoji and priority level!

🚀 Bonus Points:

Add task filtering and sorting
Implement task sharing between users
Create a dashboard with statistics
Add real-time updates using WebSockets

💡 Solution

🔍 Click to see solution

// 🎯 Our comprehensive task management system!

// 📋 Task interface
interface Task {
  id: string;
  title: string;
  description: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  categoryId: string;
  assigneeId?: string;
  dueDate?: Date;
  emoji: string;
  createdAt: Date;
  updatedAt: Date;
}

// 🏷️ Category interface
interface Category {
  id: string;
  name: string;
  color: string;
  emoji: string;
}

// 📊 Analytics interface
interface TaskAnalytics {
  totalTasks: number;
  completedTasks: number;
  completionRate: number;
  tasksByPriority: Record<Task['priority'], number>;
  tasksByCategory: Record<string, number>;
}

// 📋 Task Service
@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];
  private tasksSubject = new BehaviorSubject<Task[]>([]);
  
  tasks$ = this.tasksSubject.asObservable();
  
  // ➕ Create task
  createTask(taskData: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Task {
    const newTask: Task = {
      ...taskData,
      id: this.generateId(),
      createdAt: new Date(),
      updatedAt: new Date()
    };
    
    this.tasks.push(newTask);
    this.tasksSubject.next([...this.tasks]);
    console.log(`✅ Created task: ${newTask.emoji} ${newTask.title}`);
    
    return newTask;
  }
  
  // 📝 Update task
  updateTask(id: string, updates: Partial<Task>): Task | null {
    const taskIndex = this.tasks.findIndex(t => t.id === id);
    if (taskIndex === -1) return null;
    
    this.tasks[taskIndex] = {
      ...this.tasks[taskIndex],
      ...updates,
      updatedAt: new Date()
    };
    
    this.tasksSubject.next([...this.tasks]);
    return this.tasks[taskIndex];
  }
  
  // 🗑️ Delete task
  deleteTask(id: string): boolean {
    const initialLength = this.tasks.length;
    this.tasks = this.tasks.filter(t => t.id !== id);
    
    if (this.tasks.length < initialLength) {
      this.tasksSubject.next([...this.tasks]);
      console.log('🗑️ Task deleted successfully');
      return true;
    }
    return false;
  }
  
  // 🎯 Get tasks by category
  getTasksByCategory(categoryId: string): Task[] {
    return this.tasks.filter(t => t.categoryId === categoryId);
  }
  
  // 🔍 Search tasks
  searchTasks(query: string): Task[] {
    const lowercaseQuery = query.toLowerCase();
    return this.tasks.filter(t => 
      t.title.toLowerCase().includes(lowercaseQuery) ||
      t.description.toLowerCase().includes(lowercaseQuery)
    );
  }
  
  private generateId(): string {
    return Date.now().toString() + Math.random().toString(36).substr(2, 9);
  }
}

// 🏷️ Category Service
@Injectable({
  providedIn: 'root'
})
export class CategoryService {
  private categories: Category[] = [
    { id: '1', name: 'Work', color: '#3b82f6', emoji: '💼' },
    { id: '2', name: 'Personal', color: '#10b981', emoji: '🏠' },
    { id: '3', name: 'Learning', color: '#f59e0b', emoji: '📚' }
  ];
  
  private categoriesSubject = new BehaviorSubject<Category[]>(this.categories);
  categories$ = this.categoriesSubject.asObservable();
  
  createCategory(categoryData: Omit<Category, 'id'>): Category {
    const newCategory: Category = {
      ...categoryData,
      id: Date.now().toString()
    };
    
    this.categories.push(newCategory);
    this.categoriesSubject.next([...this.categories]);
    return newCategory;
  }
  
  getCategoryById(id: string): Category | undefined {
    return this.categories.find(c => c.id === id);
  }
}

// 📊 Analytics Service
@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {
  constructor(private taskService: TaskService) {}
  
  getTaskAnalytics(): Observable<TaskAnalytics> {
    return this.taskService.tasks$.pipe(
      map(tasks => this.calculateAnalytics(tasks))
    );
  }
  
  private calculateAnalytics(tasks: Task[]): TaskAnalytics {
    const completedTasks = tasks.filter(t => t.completed).length;
    
    return {
      totalTasks: tasks.length,
      completedTasks,
      completionRate: tasks.length > 0 ? (completedTasks / tasks.length) * 100 : 0,
      tasksByPriority: this.groupByPriority(tasks),
      tasksByCategory: this.groupByCategory(tasks)
    };
  }
  
  private groupByPriority(tasks: Task[]): Record<Task['priority'], number> {
    return tasks.reduce((acc, task) => {
      acc[task.priority] = (acc[task.priority] || 0) + 1;
      return acc;
    }, {} as Record<Task['priority'], number>);
  }
  
  private groupByCategory(tasks: Task[]): Record<string, number> {
    return tasks.reduce((acc, task) => {
      acc[task.categoryId] = (acc[task.categoryId] || 0) + 1;
      return acc;
    }, {} as Record<string, number>);
  }
}

// 🎮 Demo Component
@Component({
  selector: 'app-task-manager',
  template: `
    <div class="task-manager">
      <h1>🎯 Task Manager Dashboard</h1>
      
      <div class="analytics" *ngIf="analytics">
        <h3>📊 Analytics</h3>
        <p>Total: {{ analytics.totalTasks }} | Completed: {{ analytics.completedTasks }}</p>
        <p>Completion Rate: {{ analytics.completionRate | number:'1.1-1' }}% 🎉</p>
      </div>
      
      <button (click)="createSampleTask()">Add Sample Task 🎁</button>
      
      <div class="tasks">
        <div *ngFor="let task of tasks" class="task-item">
          {{ task.emoji }} {{ task.title }} 
          <span [class.completed]="task.completed">
            {{ task.completed ? '✅' : '⏳' }}
          </span>
        </div>
      </div>
    </div>
  `
})
export class TaskManagerComponent implements OnInit {
  tasks: Task[] = [];
  analytics: TaskAnalytics | null = null;
  
  constructor(
    private taskService: TaskService,
    private categoryService: CategoryService,
    private analyticsService: AnalyticsService
  ) {}
  
  ngOnInit(): void {
    // 👀 Subscribe to tasks
    this.taskService.tasks$.subscribe(tasks => {
      this.tasks = tasks;
    });
    
    // 📊 Subscribe to analytics
    this.analyticsService.getTaskAnalytics().subscribe(analytics => {
      this.analytics = analytics;
    });
  }
  
  createSampleTask(): void {
    const sampleTasks = [
      { title: 'Learn Angular Services', emoji: '📘', priority: 'high' as const },
      { title: 'Build Todo App', emoji: '🛠️', priority: 'medium' as const },
      { title: 'Practice TypeScript', emoji: '💻', priority: 'low' as const }
    ];
    
    const randomTask = sampleTasks[Math.floor(Math.random() * sampleTasks.length)];
    
    this.taskService.createTask({
      ...randomTask,
      description: 'Sample task for demonstration',
      completed: false,
      categoryId: '1'
    });
  }
}

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create Angular services with proper TypeScript typing 💪
✅ Use dependency injection effectively and safely 🛡️
✅ Apply best practices for service architecture 🎯
✅ Debug service issues like a pro 🐛
✅ Build scalable Angular applications with services! 🚀

Remember: Services are your friends in Angular! They help you organize code, share data, and build maintainable applications. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Angular Services and Dependency Injection!

Here’s what to do next:

💻 Practice with the task management exercise above
🏗️ Build a real Angular app using multiple services
📚 Move on to our next tutorial: Angular HTTP Client with TypeScript
🌟 Share your service-powered Angular projects with others!

Remember: Every Angular expert was once a beginner. Keep coding, keep learning, and most importantly, have fun building awesome apps with services! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn