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

@Injectable({ providedIn: 'root' })
export class CounterService {
  private count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  reset() {
    this.count = 0;
  }

  getCount() {
    return this.count;
  }
}

// counter.component.ts
import { Component, inject } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ counter.getCount() }}</p>
    <button (click)="counter.increment()">+1</button>
    <button (click)="counter.decrement()">-1</button>
    <button (click)="counter.reset()">Reset</button>
  `,
})
export class CounterComponent {
  counter = inject(CounterService);
}

/*
  Notes:
  - The component never does new CounterService() — it asks the DI
    system for the service via inject(CounterService).
  - count is private inside the service, only reachable through its
    methods, keeping the state encapsulated rather than mutated
    directly from the template.
*/