Angular: Using ReplaySubject to Implement Reactive Form Input Handling
Introduction
Replay-subjects are a specialised type of
Subject
inAngular
that function asObservable
. What is an observable ?They retain and deliver older values to the
multiple Observers
.Moreover, they offer the flexibility to specify the
number of values
and thetime duration
for which they should retain those values
Example and explanation
Advantages
History and Caching: It maintains a buffer of previously emitted items, allowing late subscribers to receive historical data.
Multi-casting: Events are multicast to multiple subscribers, ensuring all of them receive the same event history.
Error Recovery: If one subscriber encounters an error, other subscribers can still receive events from the buffer.
Testing: Useful for simulating and verifying event streams in unit tests.
Time Travel: Can implement features like "time travel" by controlling buffer size or time window.
Consistency: Provides a consistent event stream across subscribers.
Complex use case
In this scenario, we aim to implement a dynamic drop-down with search functionality. The available options in the drop-down will depend on the user's search input. We'll explore two different methods to achieve this:
Method without ReplaySubject: In this approach, we will create a drop-down that includes a search input field. As the user types in the search input, the options displayed in the drop-down will be recalculated based on the entered search text. The filtering and updating of options will be handled directly using basic array manipulation and event handling.
Method with ReplaySubject: In contrast, the second approach utilises the power of
ReplaySubject
. We will still create a drop-down with a search input, but now the filtering process and option updates will be managed by aReplaySubject
. As the user interacts with the search input, theReplaySubject
will automatically handle the filtering and notify the drop-down to display the updated options. This method ensures better reactivity and a centralised data source for the filtered options.Case 1:
Index.htmlComponent.ts
Case 2:
HTML
TS
Now what is the difference and why second approach is better ?
Reactivity: Automatically notifies subscribers of changes to the filtered options, ensuring data stays up-to-date without manual handling.
Centralised data source: Acts as a single source of truth for filtered options, simplifying data access across multiple components.
Code organisation: Separates filtering logic from display concerns, leading to cleaner and more maintainable code.
Code scalability: Enables easy expansion of the application with coordinated data updates for new subscribers.
Efficiency: Avoids unnecessary re-filtration by replaying the last emitted value to new subscribers.
Consistency: Ensures all components receive the same filtered options, avoiding data inconsistencies.
Useful Resources
Documentation : https://rxjs-dev.firebaseapp.com/api/index/class/ReplaySubject
Last updated