From e0605dab741a78672b117d75df8761d9bb319751 Mon Sep 17 00:00:00 2001
From: apalaio <telispaleo@gmail.com>
Date: Wed, 8 Jan 2025 15:11:02 +0100
Subject: [PATCH] feat: answer 56 forms and signal

---
 .../src/app/order.component.ts                | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/signal/56-forms-and-signal/src/app/order.component.ts b/apps/signal/56-forms-and-signal/src/app/order.component.ts
index 8af859893..ffaeadb00 100644
--- a/apps/signal/56-forms-and-signal/src/app/order.component.ts
+++ b/apps/signal/56-forms-and-signal/src/app/order.component.ts
@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   input,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -33,7 +34,7 @@ import { products } from './products';
       </form>
       <div class="flex justify-between">
         <div>SubTotal</div>
-        <div>{{ totalWihoutVat() }} €</div>
+        <div>{{ totalWithoutVat() }} €</div>
       </div>
       <div class="flex justify-between">
         <div>VAT (21%)</div>
@@ -60,13 +61,23 @@ export default class OrderComponent {
   });
 
   productId = input('1');
+  quantity = input(1);
   price = computed(
     () => products.find((p) => p.id === this.productId())?.price ?? 0,
   );
-  quantity = toSignal(this.form.controls.quantity.valueChanges, {
+
+  quantityValue = toSignal(this.form.controls.quantity.valueChanges, {
     initialValue: this.form.getRawValue().quantity,
   });
-  totalWihoutVat = computed(() => Number(this.price()) * this.quantity());
-  vat = computed(() => this.totalWihoutVat() * 0.21);
-  total = computed(() => this.totalWihoutVat() + this.vat());
+
+  totalWithoutVat = computed(() => Number(this.price()) * this.quantityValue());
+  vat = computed(() => this.totalWithoutVat() * 0.21);
+  total = computed(() => this.totalWithoutVat() + this.vat());
+
+  constructor() {
+    effect(() => {
+      const quantityFromUrl = this.quantity();
+      this.form.controls.quantity.setValue(quantityFromUrl);
+    });
+  }
 }