Angular Services and Dependency Injection: Creating a Service

In this chapter, we’ll continue exploring one of Angular’s core concepts: Services and Dependency Injection. Services are reusable blocks of code in Angular applications—commonly used to encapsulate business logic and data access. By extracting such logic into services, our components become cleaner and more focused on the user interface, adhering to the principle of separation of concerns.

What Is a Service?

A service is a simple JavaScript object designed to encapsulate logic or functionality for reuse across multiple components in an application. For example, we might create a UserService responsible for fetching, storing, and managing user data.

Creating a Service

In Angular, we can use the Angular CLI to generate a service. Here’s how:

Step 1: Generate a Service Using Angular CLI

Run the following command in your terminal:

ng generate service user

This command creates a new service named UserService, generating two files in your project:

• user.service.ts — the service implementation
• user.service.spec.ts — the unit test file for the service

Step 2: Implement Service Logic

Next, implement basic functionality inside user.service.ts. For instance, add a method to retrieve user information:

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

@Injectable({
  providedIn: 'root', // Makes the service available at the root level (globally)
})
export class UserService {
  private users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ];

  constructor() {}

  getUsers() {
    return this.users;
  }

  getUserById(id: number) {
    return this.users.find(user => user.id === id);
  }
}

In the code above, we define a UserService with two methods: getUsers() returns the full list of users, and getUserById(id: number) retrieves a single user by ID.

Step 3: Using the Service

We can now inject and use UserService in any component. To do so, make the following changes:

1. Import UserService.
2. Inject it into the component’s constructor.
3. Call its methods within the component.

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user-list',
  template: `
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }}
      </li>
    </ul>
  `,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users = this.userService.getUsers();
  }
}

Here, we define a UserListComponent. In the ngOnInit lifecycle hook, we call userService.getUsers() and assign the result to the component’s users property—enabling display in the template.

Summary

In this chapter, we learned how to create an Angular service and inject it into a component. Services help us organize code more effectively, promote logic reuse, and keep components lean and UI-focused.

In upcoming chapters, we’ll dive deeper into dependency injection—exploring how to inject services into other services and components. Combined with what we’ve covered so far, these techniques empower you to build highly modular and maintainable Angular applications.

If you have further questions about route parameters, revisit Chapter 5 to explore how routing can integrate with services. Next, we’ll explore advanced dependency injection concepts—stay tuned!