Add if

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>

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);

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);