refactor: use signal

Author: soliyn

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,13 @@ export const currency: Currency[] = [
 
 @Injectable()
 export class CurrencyService {
- private code = new BehaviorSubject('EUR');
+ private code = signal('EUR');
 
- readonly code$ = this.code.asObservable();
- readonly symbol$ = this.code$.pipe(
- map((code) => currency.find((c) => c.code === code)?.symbol ?? code),
+ 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,4 +1,3 @@
-import { AsyncPipe } from '@angular/common';
 import {
  ChangeDetectionStrategy,
  Component,
@@ -13,11 +12,11 @@ import { Product } from './product.model';
  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>{{ productInfo.priceA | currency }}</td>
+ <td>{{ productInfo.priceB | currency }}</td>
+ <td>{{ productInfo.priceC | currency }}</td>
  `,
- imports: [AsyncPipe, CurrencyPipe],
+ imports: [CurrencyPipe],
  providers: [CurrencyService],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })