feat: challenge 54 pipe obs signal (tomalaforge#903)

Author: tomalaforge

README.md

@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 53 challenges](https://angular-challenges.vercel.app/)
+Check [all 54 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 

apps/signal/54-pipe-observable-to-signal/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {}
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}

apps/signal/54-pipe-observable-to-signal/README.md

@@ -0,0 +1,13 @@
+# Pipe Observable to Signal
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve signal-pipe-observable-to-signal
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/signal/54-pipe-observable-to-signal/).

apps/signal/54-pipe-observable-to-signal/project.json

@@ -0,0 +1,72 @@
+{
+ "name": "signal-pipe-observable-to-signal",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/signal/54-pipe-observable-to-signal/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/signal/54-pipe-observable-to-signal",
+ "index": "apps/signal/54-pipe-observable-to-signal/src/index.html",
+ "browser": "apps/signal/54-pipe-observable-to-signal/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/signal/54-pipe-observable-to-signal/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/signal/54-pipe-observable-to-signal/src/favicon.ico",
+ "apps/signal/54-pipe-observable-to-signal/src/assets"
+ ],
+ "styles": ["apps/signal/54-pipe-observable-to-signal/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "signal-pipe-observable-to-signal:build:production"
+ },
+ "development": {
+ "buildTarget": "signal-pipe-observable-to-signal:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "signal-pipe-observable-to-signal:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ }
+ }
+}

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

@@ -0,0 +1,31 @@
+import { TableComponent } from '@angular-challenges/shared/ui';
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CurrencyPipe } from './currency.pipe';
+import { ProductRowComponent } from './product-row.component';
+import { products } from './product.model';
+
+@Component({
+ standalone: true,
+ imports: [AsyncPipe, CurrencyPipe, TableComponent, ProductRowComponent],
+ selector: 'app-root',
+ template: `
+ <table [items]="products">
+ <ng-template #header>
+ <tr>
+ @for (col of displayedColumns; track col) {
+ <th>{{ col }}</th>
+ }
+ </tr>
+ </ng-template>
+ <ng-template #body let-product>
+ <tr product-row [product]="product"></tr>
+ </ng-template>
+ </table>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {
+ products = products;
+ displayedColumns = ['name', 'priceA', 'priceB', 'priceC'];
+}

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

@@ -0,0 +1,15 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { CurrencyService } from './currency.service';
+
+@Pipe({
+ name: 'currency',
+ standalone: true,
+})
+export class CurrencyPipe implements PipeTransform {
+ currencyService = inject(CurrencyService);
+
+ transform(price: number): Observable<string> {
+ return this.currencyService.symbol$.pipe(map((s) => `${price}${s}`));
+ }
+}

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

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, map } from 'rxjs';
+
+export interface Currency {
+ name: string;
+ code: string;
+ symbol: string;
+}
+
+export const currency: Currency[] = [
+ { name: 'Euro', code: 'EUR', symbol: '€' },
+ { name: 'Dollar US', code: 'USD', symbol: 'US$' },
+ { name: 'Dollar Autralien', code: 'AUD', symbol: 'AU$' },
+ { name: 'Livre Sterling', code: 'GBP', symbol: '£' },
+ { name: 'Dollar Canadien', 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);
+ }
+}

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

@@ -0,0 +1,34 @@
+import { AsyncPipe } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ Input,
+} from '@angular/core';
+import { CurrencyPipe } from './currency.pipe';
+import { CurrencyService } from './currency.service';
+import { Product } from './product.model';
+
+@Component({
+ standalone: true,
+ 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>
+ `,
+ imports: [AsyncPipe, 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;
+ }
+
+ currencyService = inject(CurrencyService);
+}

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

@@ -0,0 +1,55 @@
+export interface Product {
+ name: string;
+ priceA: number;
+ priceB: number;
+ priceC: number;
+ currencyCode: string;
+}
+
+export const products: Product[] = [
+ {
+ name: 'bike',
+ priceA: 1000,
+ priceB: 2000,
+ priceC: 2200,
+ currencyCode: 'USD',
+ },
+ { name: 'tent', priceA: 112, priceB: 120, priceC: 41, currencyCode: 'EUR' },
+ {
+ name: 'sofa',
+ priceA: 500,
+ priceB: 422,
+ priceC: 5000,
+ currencyCode: 'EUR',
+ },
+ {
+ name: 'watch',
+ priceA: 50,
+ priceB: 130,
+ priceC: 150,
+ currencyCode: 'AUD',
+ },
+ {
+ name: 'computer',
+ priceA: 1000,
+ priceB: 2200,
+ priceC: 3500,
+ currencyCode: 'GBP',
+ },
+ { name: 'mug', priceA: 10, priceB: 15, priceC: 20, currencyCode: 'EUR' },
+ {
+ name: 'headset',
+ priceA: 100,
+ priceB: 150,
+ priceC: 220,
+ currencyCode: 'CAD',
+ },
+ { name: 'cable', priceA: 5, priceB: 10, priceC: 15, currencyCode: 'EUR' },
+ {
+ name: 'table',
+ priceA: 100,
+ priceB: 20,
+ priceC: 500,
+ currencyCode: 'EUR',
+ },
+];