Add service

apps/angular-intro/src/app/app.component.html

@@ -1,4 +1,6 @@
-<div class="p-4">
+<div class="p-4 flex flex-col gap-4">
   Hello world
   <app-counter />
+  <app-counter-with-service />
+  <app-counter-with-service />
 </div>

apps/angular-intro/src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { CounterComponent } from '../counter/counter.component';
+import { CounterWithServiceComponent } from '../counter-with-service/counter-with-service.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  imports: [CounterComponent],
+  imports: [CounterComponent, CounterWithServiceComponent],
 })
 export class AppComponent {
   title = 'angular-intro';

apps/angular-intro/src/counter-with-service/counter-with-service.component.html

@@ -0,0 +1,7 @@
+<div class="flex flex-row items-center gap-4">
+  <h3>
+    <app-value [value]="(count$ | async) || 0" />
+  </h3>
+  <app-button (click)="increment()">+1</app-button>
+  <app-button (click)="decrement()">-1</app-button>
+</div>

apps/angular-intro/src/counter-with-service/counter-with-service.component.ts

@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ValueComponent } from '../counter/value/value.component';
+import { ButtonComponent } from '../counter/button/button.component';
+import { CounterService } from './counter.service';
+
+@Component({
+  standalone: true,
+  selector: 'app-counter-with-service',
+  templateUrl: './counter-with-service.component.html',
+  imports: [CommonModule, ValueComponent, ButtonComponent],
+})
+export class CounterWithServiceComponent {
+  private readonly counterService = inject(CounterService);
+
+  count$ = this.counterService.getValue();
+
+  increment() {
+    this.counterService.increment();
+  }
+
+  decrement() {
+    this.counterService.decrement();
+  }
+}

apps/angular-intro/src/counter-with-service/counter.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class CounterService {
+  private value$ = new BehaviorSubject<number>(0);
+
+  getValue() {
+    return this.value$.asObservable();
+  }
+
+  increment() {
+    this.value$.next(this.value$.getValue() + 1);
+  }
+
+  decrement() {
+    this.value$.next(this.value$.getValue() - 1);
+  }
+}