What is an Angular service and how is the @Injectable decorator used?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Create the class

   Define a plain TypeScript class that holds the shared logic, such as a DataService with HTTP methods.

2. Step 2

   Add @Injectable

   Decorate the class with @Injectable({ providedIn: 'root' }) so Angular's injector can construct it.

3. Step 3

   Declare dependencies

   List any collaborators (like HttpClient) as constructor parameters so they are injected in turn.

4. Step 4

   Inject into a component

   Add the service as a constructor parameter in the component; Angular supplies the singleton automatically.

5. Step 5

   Use the service

   Call the service's methods from the component to fetch data or run logic, keeping the component focused on the view.

Code Example

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('/api/users');
  }
}

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

@Component({ selector: 'app-users', template: '' })
export class UsersComponent {
  constructor(private userService: UserService) {}

  load() {
    this.userService.getUsers().subscribe(console.log);
  }
}

Follow-up Questions

• What is the difference between providedIn: 'root' and registering a service in a module's providers array?
• How do you provide a service scoped to a single component?
• How does Angular's hierarchical injector resolve dependencies?
• How would you mock a service in a unit test?