Answer:54

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

@@ -1,6 +1,3 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, map } from 'rxjs';
-
 export interface Currency {
   name: string;
   code: string;
@@ -15,16 +12,6 @@ export const currency: Currency[] = [
   { name: 'Dollar Canadian', code: 'CAD', symbol: 'CAD' },
 ];
 
-@Injectable()
-export class CurrencyService {
-  private code = new BehaviorSubject('EUR');
-
-  readonly code$ = this.code.asObservable();
-  readonly symbol$ = this.code$.pipe(
-    map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
-  );
-
-  public updateCode(code: string) {
-    this.code.next(code);
-  }
+export function getCurrency(code: string): string {
+  return currency.find((c) => c.code === code)?.symbol ?? code;
 }

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

@@ -1,34 +1,25 @@
-import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  inject,
-  Input,
+  computed,
+  input,
 } from '@angular/core';
-import { CurrencyPipe } from './currency.pipe';
-import { CurrencyService } from './currency.service';
+import { getCurrency } from './currency.service';
 import { Product } from './product.model';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   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],
-  providers: [CurrencyService],
+  imports: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductRowComponent {
-  protected productInfo!: Product;
-
-  @Input({ required: true }) set product(product: Product) {
-    this.currencyService.updateCode(product.currencyCode);
-    this.productInfo = product;
-  }
-
-  currencyService = inject(CurrencyService);
+  readonly product = input.required<Product>();
+  readonly currency = computed(() => getCurrency(this.product().currencyCode));
 }

libs/shared/ui/src/lib/table.component.ts

@@ -1,9 +1,10 @@
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, contentChild, input, TemplateRef } from '@angular/core';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'table',
-  imports: [],
+  imports: [NgTemplateOutlet],
   template: `
     <thead>
       <ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>