From 3ff141a43364b4b7e1228080aa2d2227dcd17078 Mon Sep 17 00:00:00 2001
From: Jakub Kubacki <jakub.kubacki@synergycodes.com>
Date: Mon, 2 Jun 2025 21:42:09 +0200
Subject: [PATCH] Add if

---
 .../counter-with-service.component.html             | 13 ++++++++++++-
 .../counter-with-service.component.ts               |  1 +
 .../src/counter-with-service/counter.service.ts     |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/angular-intro/src/counter-with-service/counter-with-service.component.html b/apps/angular-intro/src/counter-with-service/counter-with-service.component.html
index 3fcd7a9..c77f0fb 100644
--- a/apps/angular-intro/src/counter-with-service/counter-with-service.component.html
+++ b/apps/angular-intro/src/counter-with-service/counter-with-service.component.html
@@ -1,7 +1,18 @@
+@let count = (count$ | async) || 0;
 <div class="flex flex-row items-center gap-4">
   <h3>
-    <app-value [value]="(count$ | async) || 0" />
+    <app-value [value]="count" />
   </h3>
   <app-button (click)="increment()">+1</app-button>
   <app-button (click)="decrement()">-1</app-button>
+
+  <div>
+    @if (count > 0) {
+    <p>Positive</p>
+    } @else if (count < 0) {
+    <p>Negative</p>
+    } @else {
+    <p>Zero</p>
+    }
+  </div>
 </div>
diff --git a/apps/angular-intro/src/counter-with-service/counter-with-service.component.ts b/apps/angular-intro/src/counter-with-service/counter-with-service.component.ts
index 81a9969..1c121aa 100644
--- a/apps/angular-intro/src/counter-with-service/counter-with-service.component.ts
+++ b/apps/angular-intro/src/counter-with-service/counter-with-service.component.ts
@@ -10,6 +10,7 @@ import { CounterService } from './counter.service';
   selector: 'app-counter-with-service',
   templateUrl: './counter-with-service.component.html',
   imports: [CommonModule, ValueComponent, ButtonComponent],
+  providers: [CounterService],
 })
 export class CounterWithServiceComponent {
   private readonly counterService = inject(CounterService);
diff --git a/apps/angular-intro/src/counter-with-service/counter.service.ts b/apps/angular-intro/src/counter-with-service/counter.service.ts
index 44a6af0..c0b33eb 100644
--- a/apps/angular-intro/src/counter-with-service/counter.service.ts
+++ b/apps/angular-intro/src/counter-with-service/counter.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class CounterService {
   private value$ = new BehaviorSubject<number>(0);