Services in Angular: Reusable Business Logic

In professional apps, you do not put all logic inside components. Components should focus on UI. Services handle data and business logic.

Example: a simple user service

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

@Injectable({ providedIn: 'root' })
export class UserService {
  getUserName() {
    return 'Christopher Evans';
  }
}

Use it inside a component

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

@Component({
  selector: 'app-header',
  standalone: true,
  template: `<h1>Hi, {{ name }}</h1>`,
})
export class HeaderComponent {
  name = '';

  constructor(private userService: UserService) {
    this.name = this.userService.getUserName();
  }
}

Why this matters

If you keep logic in services:

• components stay small and readable
• logic becomes reusable
• testing is easier

Next: Dependency Injection explained, so services feel natural (not magic).