Feat/Modernize budget viewer state with signals

[CarolGitonga]

For this refactor, I migrated the budget selection feature from a classic Angular/RxJS pattern to a modern Angular Signals–based architecture. The goal was to make the component tree more declarative, predictable, and fine-grained in how it responds to data updates.

My approach followed four steps required by the assignment:

Replaced constructor-based dependency injection with the modern inject() API to support tree-shakable, functional Angular architecture.

Converted RxJS Observables (overview$, sharedBudgets$, allBudgets$) into Signals using toSignal().

Replaced pipe/subscribe-based logic with computed() for derived state and effect() for component side effects.

Updated the parent template to pass signal values instead of Observables to the child component, and refactored the child to accept standard Inputs.

This resulted in a clean, reactive component with minimal imperative logic and no manual subscriptions.

2. Differences in coding styles (old vs. new)
   Previous approach (RxJS + subscribe/async pipe)

Component lifecycle managed with OnInit

Manual wiring of streams using combineLatest, map, pipe

Imperative subscribe() for side effects

Parent passed Observables to child components

Multiple change detection cycles triggered through async pipes

Signals-based approach

No lifecycle hooks required; Signals react immediately

computed() expresses relationships declaratively instead of manually mapping streams

effect() replaces imperative subscribe() and handles side effects cleanly

Parent passes plain values (or signal-derived values) to child inputs

Fine-grained reactivity reduces unnecessary template re-renders

State is synchronous and always available

Signals lead to simpler codepaths, better readability, and more predictable UI behavior, especially for large or frequently changing datasets.

3. How signals and observables work & their fundamental differences
   Observables

Represent asynchronous streams that can emit multiple values over time

Excellent for HTTP calls, event streams, and complex async operations

Require subscription management (either manually or via async pipes)

Push-based: values are emitted to the consumer

Signals

Hold synchronous state with a current value always available

Not inherently asynchronous (but can wrap async streams with toSignal())

Change detection is fine-grained and dependency-tracked

Pull-based: templates/functions call the signal to read its current value

Work extremely well for UI state, presentation logic, and computed derivations

In this assignment:
I continued to use Observables for the store-level data layer (as intended in the codebase), but converted them into Signals at the presentation layer for optimal UI performance and clarity.

4. Another UI/state management paradigm I’ve used and comparison

I have worked with React Hooks (useState/useEffect/useMemo) and Vue’s Composition API. Angular Signals bring Angular much closer to these modern paradigms:

Like React, computed() resembles useMemo, and effect() resembles useEffect without dependency arrays.

Like Vue, Signals provide fine-grained dependency tracking and predictable state access.

Unlike React or Vue, Signals integrate directly with Angular’s underlying change detection system, eliminating the need for zones and allowing future zoneless applications.
“This refactor uses Angular Signals (computed, effect, toSignal) which require Angular 16+.

[CarolGitonga]

Refactored SelectBudget and BudgetTable to Angular Signals