Angular Services and Dependency Injection

# CHAPTER 9

Angular Services and Dependency Injection #

1. Chapter Introduction #

2. Learning Objectives #

• Understand why Services are needed.

• Create a service using the Angular CLI.

• Understand the @Injectable decorator.

• Inject a service into a component.

• Share state between multiple components via a singleton service.

3. Creating a Service #

ng g service task

This generates task.service.ts:

import { Injectable } from '@angular/core';

// 'providedIn: root' makes this a Singleton — one instance for the entire app
@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: string[] = ['Buy groceries', 'Learn Angular', 'Exercise'];

  getTasks(): string[] {
    return this.tasks;
  }

  addTask(task: string): void {
    this.tasks.push(task);
  }

  deleteTask(index: number): void {
    this.tasks.splice(index, 1);
  }
}

4. Dependency Injection: Using the Service #

import { Component, OnInit } from '@angular/core';
import { TaskService } from '../task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html'
})
export class TaskListComponent implements OnInit {
  tasks: string[] = [];
  newTask: string = '';

  // Angular sees TaskService in the constructor and provides an instance automatically
  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }

  addTask(): void {
    if (this.newTask.trim()) {
      this.taskService.addTask(this.newTask);
      this.newTask = '';
    }
  }
}

<input [(ngModel)]="newTask" placeholder="New Task" />
<button (click)="addTask()">Add</button>

<ul>
  <li *ngFor="let task of tasks">{{ task }}</li>
</ul>

5. Singleton: Shared State Between Components #

TaskService (Singleton)
   |
   +---- TaskListComponent (reads tasks)
   |
   +---- TaskCountComponent (reads tasks.length)
   |
   +---- TaskFormComponent (adds tasks)

All three components look at the same TaskService instance. When TaskFormComponent adds a task, TaskListComponent and TaskCountComponent automatically reflect the update.

6. Mini Project: Task Manager Service #

export class TaskFormComponent {
  newTask = '';
  constructor(private taskService: TaskService) {}
  
  onSubmit() {
    this.taskService.addTask(this.newTask);
    this.newTask = '';
  }
}

export class TaskCountComponent {
  constructor(public taskService: TaskService) {}
  
  get count(): number {
    return this.taskService.getTasks().length;
  }
}

7. Common Mistakes #

• Creating service instances with new: Never write let service = new TaskService() in a component. This bypasses the DI system and creates a separate, unshared instance that defeats the Singleton pattern.

• Business logic in components: If you write API calls directly in ngOnInit of a component without a service, that component becomes impossible to test and reuse.

8. Best Practices #

• One service per responsibility: Create AuthService for auth, ProductService for products. Don't put all logic in one giant service.

• Make services pure: Services should not depend on Angular's UI or DOM. This keeps them testable with simple unit tests.

9. MCQs with Answers #

10. Interview Questions #

• Q: What is the Singleton Pattern in Angular Services? Why is it useful?

• Q: Explain Dependency Injection in Angular. How does the framework know which service to provide to which component?

11. Summary #

12. Next Chapter Recommendation #