From 39f9f91bf480100473823b288a6ccf3121e0b1d3 Mon Sep 17 00:00:00 2001
From: Hien Pham <phhien203@gmail.com>
Date: Mon, 16 Mar 2026 19:08:33 +0200
Subject: [PATCH] feat(Answer:54): refactor to replace pipe observable with
 signal

---
 .../src/app/currency.pipe.ts                  | 14 ---------
 .../src/app/currency.service.ts               | 17 ++---------
 .../src/app/product-row.component.ts          | 29 +++++++------------
 libs/shared/ui/src/lib/table.component.ts     |  3 +-
 4 files changed, 14 insertions(+), 49 deletions(-)
 delete mode 100644 apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts

diff --git a/apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts b/apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts
deleted file mode 100644
index 411243b81..000000000
--- a/apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject, Pipe, PipeTransform } from '@angular/core';
-import { map, Observable } from 'rxjs';
-import { CurrencyService } from './currency.service';
-
-@Pipe({
-  name: 'currency',
-})
-export class CurrencyPipe implements PipeTransform {
-  currencyService = inject(CurrencyService);
-
-  transform(price: number): Observable<string> {
-    return this.currencyService.symbol$.pipe(map((s) => `${price}${s}`));
-  }
-}
diff --git a/apps/signal/54-pipe-observable-to-signal/src/app/currency.service.ts b/apps/signal/54-pipe-observable-to-signal/src/app/currency.service.ts
index 8ddf570bf..0578ffe5d 100644
--- a/apps/signal/54-pipe-observable-to-signal/src/app/currency.service.ts
+++ b/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;
 }
diff --git a/apps/signal/54-pipe-observable-to-signal/src/app/product-row.component.ts b/apps/signal/54-pipe-observable-to-signal/src/app/product-row.component.ts
index d39777971..47eb35406 100644
--- a/apps/signal/54-pipe-observable-to-signal/src/app/product-row.component.ts
+++ b/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));
 }
diff --git a/libs/shared/ui/src/lib/table.component.ts b/libs/shared/ui/src/lib/table.component.ts
index 7b5159326..1c38c6696 100644
--- a/libs/shared/ui/src/lib/table.component.ts
+++ b/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>