Refactor: Modernize budget viewer state with Signals

[TMUCHIRI]

Approach
Fully refactored the budget viewer from RxJS + async pipe to modern Angular Signals (v17+):

• Used toSignal() to convert existing observables
• Replaced all @Input() + async pipe with signal inputs (input(), input.required())
• Switched to @for / @if template control flow
• Made both components fully standalone + OnPush → completely zoneless
• Removed CommonModule entirely (big bonus achieved)

Key benefits of Signals over RxJS in this UI scenario

• No manual subscriptions → zero memory leaks
• Fine-grained reactivity → only affected parts re-render
• Dramatically simpler code and templates
• Enables zoneless mode → significant performance improvement

Coding style difference
RxJS = imperative (manual subscribe/unsubscribe, complex operators)
Signals = declarative (automatic reactivity, pure functions)

Signals vs Observables

• Signals: synchronous, single current value → perfect for UI state
• Observables: asynchronous streams → perfect for HTTP/events
  They are complementary – toSignal() is the ideal bridge.

Another paradigm I’ve used
React + Hooks (and Zustand/Redux). React is excellent for composability and ecosystem, but Angular with Signals + Standalone + Nx monorepos is superior for large-scale enterprise consistency, type safety, and long-term maintainability.