Services & DI

Relax. We'll talk through this in plain words — no textbook voice.

Services are singleton objects used to share application logic or data between components. Dependency Injection (DI) lets Angular automatically supply the services that components need.

typescript

// logger.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

// my.component.ts
export class MyComponent {
  constructor(private logger: LoggerService) {
    this.logger.log('Component created!');
  }
}

You should see

(Once MyComponent is created, 'Component created!' shows up in the browser console)