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

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

  increment() {
    this.count++;
  }
}

// incrementer.component.ts — only changes the count
import { Component, inject } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-incrementer',
  standalone: true,
  template: `<button (click)="counter.increment()">Increment shared count</button>`,
})
export class IncrementerComponent {
  counter = inject(CounterService);
}

// display.component.ts — only displays the count
import { Component, inject } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-display',
  standalone: true,
  template: `<p>Shared count is: {{ counter.count }}</p>`,
})
export class DisplayComponent {
  counter = inject(CounterService);
}

// app.component.ts
import { Component } from '@angular/core';
import { IncrementerComponent } from './incrementer/incrementer.component';
import { DisplayComponent } from './display/display.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [IncrementerComponent, DisplayComponent],
  template: `
    <app-incrementer></app-incrementer>
    <app-display></app-display>
  `,
})
export class AppComponent {}

/*
  Notes:
  - IncrementerComponent and DisplayComponent are siblings with no
    @Input/@Output between them and no shared parent state — yet both
    inject the same 'root' instance of CounterService.
  - Clicking the increment button updates the one shared count, and
    the display component reflects it immediately, because both hold
    a reference to the exact same service object.
*/