refactor: convert budget components to Angular signals

[Dennoh12]

Refactoring Approach

Converted both components from RxJS Observables to Angular Signals for better reactivity.

Changes Made

Parent Component:

• Replaced constructor injection with inject()
• Converted observables to signals using toSignal()
• Replaced .subscribe() with effect()
• Created computed signals for derived state

Child Component:

• Replaced @Input() with input() signal inputs
• Removed manual subscription management
• Removed lifecycle hooks (ngOnInit, ngOnDestroy)
• Added computed signals for data transformations

Benefits of Signals

1. Simpler: No manual subscription management
2. Automatic cleanup: No memory leaks
3. Better performance: Fine-grained reactivity
4. Less code: Removed lifecycle hooks

Coding Style Difference

RxJS = Imperative: You tell the code WHEN to update
Signals = Declarative: You declare WHAT should happen

How They Work

Observables: Stream of values over time (like a river flowing)
Signals: Current value with change notification (like a variable that alerts you)

Fundamental difference:

• Observables are push-based (emit values to you)
• Signals are pull-based (you read current value)

Other Paradigms

I've used React Hooks (useState, useEffect):

• Better: Simpler API, huge community
• Worse: Manual dependency tracking, stale closure bugs