Providing and Injecting Services

Services are the backbone of Angular applications. They encapsulate business logic, data access, and shared state. Angular's dependency injection system creates and delivers service instances.

Creating a Service

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private users: User[] = [];

  getUsers(): User[] {
    return this.users;
  }

  addUser(user: User): void {
    this.users.push(user);
  }

  removeUser(id: number): void {
    this.users = this.users.filter(u => u.id !== id);
  }
}

Injecting a Service

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

@Component({
  selector: 'app-user-list',
  template: `<p *ngFor="let user of users">{{ user.name }}</p>`,
})
export class UserListComponent {
  private userService = inject(UserService);
  users = this.userService.getUsers();
}

Constructor Injection (Traditional)

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

  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

providedIn: 'root'

The providedIn: 'root' option registers the service as a singleton at the application root level:

• One instance shared across the entire application
• Lazy-loaded — only created when first injected
• Automatically tree-shakable if never used

Alternative Provider Scopes

// Application-wide singleton (default)
@Injectable({ providedIn: 'root' })

// Scoped to a specific NgModule
@Injectable({ providedIn: SomeModule })

// Scoped to a specific component
@Component({
  providers: [UserService],
})

Angular's inject() function provides a cleaner way to inject dependencies outside of constructor parameter lists.

Why Use inject()?

// Constructor injection — verbose with many dependencies
constructor(
  private userService: UserService,
  private authService: AuthService,
  private logger: LoggerService,
  private config: ConfigService,
) {}

// With inject() — cleaner
private userService = inject(UserService);
private authService = inject(AuthService);
private logger = inject(LoggerService);
private config = inject(ConfigService);

inject() in Functions

import { inject } from '@angular/core';
import { Router } from '@angular/router';

export function authGuard(): boolean {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (!authService.isLoggedIn) {
    router.navigate(['/login']);
    return false;
  }
  return true;
}

inject() with Optional Dependencies

import { inject, Optional } from '@angular/core';

// Returns null if the service is not provided
private analytics = inject(AnalyticsService, { optional: true });

inject() with InjectionToken

import { inject, InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

// In a component or service
private apiUrl = inject(API_URL);

When to Use Which