Answer:54 signal pipe

apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts

@@ -1,5 +1,4 @@
 import { inject, Pipe, PipeTransform } from '@angular/core';
-import { map, Observable } from 'rxjs';
 import { CurrencyService } from './currency.service';
 
 @Pipe({
@@ -9,7 +8,7 @@ import { CurrencyService } from './currency.service';
 export class CurrencyPipe implements PipeTransform {
   currencyService = inject(CurrencyService);
 
-  transform(price: number): Observable<string> {
-    return this.currencyService.symbol$.pipe(map((s) => `${price}${s}`));
+  transform(price: number): string {
+    return `${price}${this.currencyService.symbol()}`;
   }
 }

apps/signal/54-pipe-observable-to-signal/src/app/currency.service.ts

@@ -1,5 +1,4 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, map } from 'rxjs';
+import { computed, Injectable, signal } from '@angular/core';
 
 export interface Currency {
   name: string;
@@ -17,14 +16,14 @@ export const currency: Currency[] = [
 
 @Injectable()
 export class CurrencyService {
-  private code = new BehaviorSubject('EUR');
+  #code = signal('EUR');
 
-  readonly code$ = this.code.asObservable();
-  readonly symbol$ = this.code$.pipe(
-    map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
+  readonly code = this.#code.asReadonly();
+  readonly symbol = computed(
+    () => currency.find((c) => c.code === this.code())?.symbol ?? this.code(),
   );
 
   public updateCode(code: string) {
-    this.code.next(code);
+    this.#code.set(code);
   }
 }

apps/signal/54-pipe-observable-to-signal/src/app/product-row.component.ts

@@ -1,9 +1,9 @@
-import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   inject,
-  Input,
+  input,
+  OnInit,
 } from '@angular/core';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
@@ -13,22 +13,21 @@ import { Product } from './product.model';
   standalone: true,
   selector: 'tr[product-row]',
   template: `
-    <td>{{ productInfo.name }}</td>
-    <td>{{ productInfo.priceA | currency | async }}</td>
-    <td>{{ productInfo.priceB | currency | async }}</td>
-    <td>{{ productInfo.priceC | currency | async }}</td>
+    <td>{{ product().name }}</td>
+    <td>{{ product().priceA | currency }}</td>
+    <td>{{ product().priceB | currency }}</td>
+    <td>{{ product().priceC | currency }}</td>
   `,
-  imports: [AsyncPipe, CurrencyPipe],
+  imports: [CurrencyPipe],
   providers: [CurrencyService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductRowComponent {
-  protected productInfo!: Product;
-
-  @Input({ required: true }) set product(product: Product) {
-    this.currencyService.updateCode(product.currencyCode);
-    this.productInfo = product;
-  }
+export class ProductRowComponent implements OnInit {
+  product = input.required<Product>();
 
   currencyService = inject(CurrencyService);
+
+  ngOnInit(): void {
+    this.currencyService.updateCode(this.product().currencyCode);
+  }
 }