Angular Services & Dependency Injection

Creating Services

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

@Injectable({
  providedIn: 'root' // Singleton across entire app
})
export class UserService {
  private users: User[] = [];

  getUsers() {
    return this.users;
  }

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

Dependency Injection

// Inject in component
export class UserComponent {
  constructor(private userService: UserService) {}

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

// Inject in another service
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(
    private http: HttpClient,
    private router: Router
  ) {}
}

Provider Scope

// Root level - singleton
@Injectable({
  providedIn: 'root'
})
export class SingletonService {}

// Module level
@NgModule({
  providers: [ModuleScopedService]
})
export class FeatureModule {}

// Component level - new instance per component
@Component({
  providers: [ComponentScopedService]
})
export class MyComponent {}

HttpClient

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

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }

  createUser(user: User): Observable<User> {
    return this.http.post<User>('/api/users', user);
  }

  updateUser(id: string, user: User): Observable<User> {
    return this.http.put<User>(`/api/users/${id}`, user);
  }

  deleteUser(id: string): Observable<void> {
    return this.http.delete<void>(`/api/users/${id}`);
  }
}

Interceptors

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const token = localStorage.getItem('token');

    if (token) {
      const cloned = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(cloned);
    }

    return next.handle(req);
  }
}

// Register in module
providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]