1. What is a Service?

An Angular Service is a TypeScript class used to keep reusable business logic, data-access logic, shared state, or utility functionality separate from components.

Instead of writing all logic inside a component, we move common or non-UI logic into a service and inject the service into components using Angular's Dependency Injection (DI) system.

A service is commonly decorated with:

@Injectable({
  providedIn: 'root'
})

Simple idea

Component
    ↓
  Service
    ↓
API / Shared Data / Business Logic

For example:

Product Component
       ↓
Product Service
       ↓
Backend Web API

2. Why do we need Services?

Components should mainly concentrate on the UI and user interaction.

Suppose multiple components need product information:

ProductList
ProductDetails
ShoppingCart

Without a service, each component might contain its own API/data-access logic.

ProductList   → API
ProductDetails → API
ShoppingCart   → API

This creates duplicate code and makes maintenance harder.

With a service:

ProductList ────┐
ProductDetails ─┼──→ ProductService ──→ API
ShoppingCart ───┘

All components can reuse the same service.

Services are commonly used for:

Calling REST APIs
Business logic
Authentication
Shared application state
Logging
Caching
Utility functions
Sharing data between components

3. Full Simple Sample Program

Let's create a simple ProductService that provides products to a component.

`product.service.ts`

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

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  getProducts(): string[] {
    return [
      'Laptop',
      'Mobile',
      'Keyboard',
      'Mouse'
    ];
  }
}

`product.ts`

import { Component } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './product.html'
})
export class Product {

  products: string[] = [];

  constructor(private productService: ProductService) {
    this.products = this.productService.getProducts();
  }
}

`product.html`

<h2>Products</h2>

<ul>
  @for (product of products; track product) {
    <li>{{ product }}</li>
  }
</ul>

4. Explanation

Step 1 — Create the Service

export class ProductService

ProductService contains reusable product-related logic.

Step 2 — Make it Injectable

@Injectable({
  providedIn: 'root'
})

@Injectable() tells Angular that the class can participate in Angular's Dependency Injection system.

providedIn: 'root'

means Angular provides the service at the application's root injector.

Typically, this means one shared service instance is available throughout the application.

Step 3 — Create the Service Method

getProducts(): string[] {
  return [
    'Laptop',
    'Mobile',
    'Keyboard',
    'Mouse'
  ];
}

The service contains the logic for obtaining product information.

In a real application, this method might call an ASP.NET Core Web API using HttpClient.

Step 4 — Inject the Service

constructor(private productService: ProductService)

Angular's Dependency Injection system creates/resolves the ProductService and supplies it to the component.

We don't manually create it like this:

const service = new ProductService();

Instead, Angular manages the dependency.

Step 5 — Call the Service

this.products = this.productService.getProducts();

The component asks the service for the product data.

The component doesn't need to know how the service obtains that data.

5. Flow

When Angular creates the Product component:

Angular creates Product component
          ↓
Sees ProductService dependency
          ↓
Dependency Injection resolves ProductService
          ↓
Injects ProductService into Product
          ↓
Product calls getProducts()
          ↓
Service returns products
          ↓
Component stores products
          ↓
Template displays products

6. Real-World Example

In a real Angular application, a service commonly communicates with a backend API.

For example:

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http: HttpClient) {}

  getProducts() {
    return this.http.get<Product[]>(
      'https://localhost:5001/api/products'
    );
  }
}

The architecture becomes:

Angular Component
       ↓
ProductService
       ↓
HttpClient
       ↓
ASP.NET Core Web API
       ↓
SQL Server

This is one of the most common uses of Angular services.

7. Advantages

Reusability

One service can be used by multiple components.

Component A ─┐
Component B ─┼─→ ProductService
Component C ─┘

Separation of Concerns

Components handle presentation and user interaction, while services handle reusable application logic.

Easier Maintenance

If API-related logic changes, you usually update the service rather than every component.

Dependency Injection

Angular automatically manages service dependencies and their lifetimes according to where they are provided.

Easier Testing

Components and services can be tested separately, and service dependencies can be mocked.

Shared State

A service can maintain state that needs to be shared across parts of the application.

8. Disadvantages

Services themselves are not a disadvantage, but poor design can cause problems.

Overusing a single service

Putting everything into one large service can create a God Service that becomes difficult to maintain.

Instead of:

ApplicationService
 ├── Login
 ├── Products
 ├── Orders
 ├── Customers
 ├── Payments
 └── Logging

prefer focused services:

AuthService
ProductService
OrderService
CustomerService
PaymentService

Incorrect provider scope

Providing services at different injector levels can create multiple instances when you expected shared state.

9. Key Points

A service is usually a TypeScript class containing reusable/non-UI logic.
Services help keep components focused on UI responsibilities.
@Injectable() makes a class available for Angular's DI mechanisms.
providedIn: 'root' is the common way to provide an application-wide service.
Services are injected using Dependency Injection.
Services commonly handle HTTP calls, business logic, authentication, logging, caching, utilities, and shared state.
Multiple components can consume the same service.
Avoid putting unrelated functionality into one huge service.
Angular CLI can generate a service:

ng generate service services/product

Short form:

ng g s services/product

10. Interview Questions and Answers

1. What is a service in Angular?

An Angular service is a TypeScript class used to encapsulate reusable functionality such as business logic, API communication, shared state, authentication, or utility functions.

2. Why do we use services?

Services provide code reuse and separation of concerns. They allow components to focus primarily on UI while reusable logic is kept separately.

3. How do you create a service?

Using Angular CLI:

ng generate service product

or:

ng g s product

4. What is `@Injectable()`?

@Injectable() marks a class for use with Angular's Dependency Injection system and allows Angular to resolve its dependencies.

5. What does `providedIn: 'root'` mean?

@Injectable({
  providedIn: 'root'
})

It registers the service with the root environment injector, making it broadly available throughout the application and normally resulting in a shared application-level instance.

6. How is a service used inside a component?

It can be injected through the constructor:

constructor(private productService: ProductService) {}

Modern Angular also supports inject():

private productService = inject(ProductService);

7. Can one service use another service?

Yes. Services can depend on other services through Dependency Injection.

constructor(private loggingService: LoggingService) {}

8. Can multiple components use the same service?

Yes. That's one of the primary purposes of services. When the service is provided at the root level, multiple components can normally consume the same service instance.

Interview Definition

An Angular service is an injectable TypeScript class used to encapsulate reusable business logic, data access, shared state, or utility functionality, allowing components to remain focused on presentation and user interaction.

What is a Service in Angular?