Refactor: Modernize budget viewer state with Signals

[Emannuh]

My Approach & Key Benefits of Signals:

• Converted Observable input to Signal using toSignal()
• Replaced @Input() with input() and @Output() with output()
• Replaced constructor DI with inject() for better composition
• Replaced @ViewChild() with viewChild() signals
• Used effect() to handle side effects (dataSource updates, paginator setup)
• Removed manual subscription management (SubSink)
• Updated template to use signal values with dataSource()

Key Benefits in this UI Scenario:

• Simpler mental model: No more subscription management
• Automatic dependency tracking: Signals know exactly what depends on them
• Better performance: Granular updates instead of change detection cycles
• Type-safe: Better TypeScript integration
• Reduced boilerplate: No more async pipes or subscription cleanup

Difference in Coding Styles:

• Before (RxJS): Imperative reactive programming - manually managing streams, subscriptions, and lifecycle hooks
• After (Signals): Declarative reactive programming - declaring state relationships and letting Angular handle updates

Signals vs Observables:

• Observables: Push-based streams for representing events over time (asynchronous by nature)
• Signals: Push-pull reactive primitives for representing synchronous state values
• Fundamental difference: Observables are for events/streams over time, Signals are for reactive state values

Another Paradigm I've Used:

I've worked with React Hooks (useState, useEffect). The declarative approach is similar but:

• Better in Signals: Automatic dependency tracking without dependency arrays, better performance with granular updates
• Worse in React: Dependency arrays can be error-prone, entire components re-render on state changes
• Signals feel more integrated into the framework compared to React's more library-like approach