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..4f69c30ea 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,7 @@ 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 { + return `${price}${this.currencyService.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..e93bc1931 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'); + #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); } } 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 ce375e91e..6a72d06fc 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,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: ` - {{ productInfo.name }} - {{ productInfo.priceA | currency | async }} - {{ productInfo.priceB | currency | async }} - {{ productInfo.priceC | currency | async }} + {{ product().name }} + {{ product().priceA | currency }} + {{ product().priceB | currency }} + {{ product().priceC | currency }} `, - 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(); currencyService = inject(CurrencyService); + + ngOnInit(): void { + this.currencyService.updateCode(this.product().currencyCode); + } }