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;
-
+
+1
-1
+
+
+ @if (count > 0) {
+
Positive
+ } @else if (count < 0) {
+
Negative
+ } @else {
+
Zero
+ }
+
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(0);