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 index e3cc993f4..a6f30ab1d 100644 --- 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 @@ -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,8 @@ import { CurrencyService } from './currency.service'; export class CurrencyPipe implements PipeTransform { currencyService = inject(CurrencyService); - transform(price: number): Observable { - return this.currencyService.symbol$.pipe(map((s) => `${price}${s}`)); + transform(price: number): string { + const symbol = this.currencyService.symbol(); + return `${price}${symbol}`; } } 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..14e1a724d 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,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'); + private code = signal('EUR'); - readonly code$ = this.code.asObservable(); - readonly symbol$ = this.code$.pipe( - map((code) => currency.find((c) => c.code === code)?.symbol ?? code), - ); + readonly symbol = computed(() => { + const current = this.code(); + return currency.find((c) => c.code === current)?.symbol ?? current; + }); - public updateCode(code: string) { - this.code.next(code); + updateCode(newCode: string) { + this.code.set(newCode); } } 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 7cb3d4e03..40929397b 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,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: ` {{ productInfo.name }} - {{ productInfo.priceA | currency | async }} - {{ productInfo.priceB | currency | async }} - {{ productInfo.priceC | currency | async }} + {{ productInfo.priceA | currency }} + {{ productInfo.priceB | currency }} + {{ productInfo.priceC | currency }} `, - imports: [AsyncPipe, CurrencyPipe], + imports: [CurrencyPipe], providers: [CurrencyService], changeDetection: ChangeDetectionStrategy.OnPush, })