🧮 Deep Dive: Building a Reactive VAT Calculator with Angular Signals

Calculators are a practical way to see the power of reactivity. With Angular signals, you can build a VAT calculator that updates totals instantly as you type, and keeps a live history of all your calculations—no manual refresh or state juggling required.

Signals in Angular let you manage form state, perform calculations, and update the UI in real time, all with minimal code and maximum clarity.

How This Example Works

• Signal Declarations: The price, VAT percent, and calculation history are all stored in signals, e.g. price = signal(0), vatInPercent = signal(0), listing = signal([]).
• Live Calculation: As you type in the price or VAT, computed signals update totalVat and total instantly. The UI always shows the latest values.
• Saving Results: Clicking Save adds the current calculation to the listing signal, which is displayed in a table below.
• Reactive UI: The template uses 0, 0, and @if (listing().length) to show results and history. Whenever any signal changes, Angular updates the UI automatically.
• No Subscriptions Needed: Signals handle all reactivity for you. The UI and state stay in sync in real time.

Why Use Signals for Calculators?

• Instant Feedback: Users see results as they type, with no lag or manual refresh.
• Performance: Only the parts of the UI that use the signal are updated.
• Readability: The code is easy to follow and maintain, even as features grow.
• Fine-Grained Reactivity: Signals track exactly where they’re used, so updates are efficient and instant.
• Real-World Use: This pattern works for any live calculator, form, or dashboard.