Introduction
In previous post RxJS – Combining Data Streams we started with basics of combining an ActionStream and DataStream and why these are common in angular reactive applications.
Today, we’ll see yet another example where we will combine a DataStream and ActionStream.
Initial Setup
We’ve some notes data available from a backend. Here is how the notes information is stored in a table (I won’t get into details of backend-api and database and will keep focus on angular part)
(In a more typical scenario, categoryId should be the foreign-key linked with categories table, but here for simplicity proposes, we have just categoryId numeric value stored)
This data is then available via a REST API but we won’t discuss that part here.
Angular Setup
On Angular side I’ve created a folder for the various angular bits to fetch and display notes data as shown below
and following is the resulting UI
our focus will be the part, where user select a different category from the select element and the User Interface only displays notes from that selected Category.
This example is similar to what we saw in previous post. Here user is performing an action (actionSubject) to filter data. So we can use combineLatest RxJS function to achieve the desired functionality.
Lets see how these various angular bits fit together for this example:
notes.service.ts
this service is responsible for fetching data notes$ from database via a REST call to backend.
The service also keep tracks of selectedCategory which is actionStream.
So, what we have here? First, we created a private subject selectedCategorySubject (a behavior subject) and expose its observable via a public property name selectedCategoryAction$. other component or services will subscribe to this property (other way would be to make subject public and let anyone subscribe to it directly). So this part is done.
Next, we need to provide a way to push data to this observable stream and for this we created a method selectCategory() which wraps the call to subject’s next() method for new data push.
notes-list.component.ts and notes-list.component.html
the above shows a very basic setup for data-retrieval via service and show it in UI using async pipe (we have covered these details in previous posts). The resulting UI is as follows
Lets add a select element to show categories which user can select to filter the data
and this will result in the following updates in the UI
However, data filtering is yet not in place and data is not filtered when we select a different items. This is actually the part we were preparing for and is focus of today’s post.
If you remember previous post, we will need to combine actionStream and dataStream using RxJS operator combineLatest to achieve data filtering in reactive way.
Combining actionStream and DataStream
The following shall look very familiar as we have done similar example in previous post
once again, we are using combineLatest to trigger the pipeline whenever user select a different category and then using JavaScript’s filter method for filtering purposes.
and following is the resulting filtered list based on user selection.
Summary
In this post, we continued our learning of combining data-stream with an action-stream and saw another example of RxJS combineLatest to filter data based on user selection.
You can check the source code available form this git repo.
The deployed sample application is available on this URL.
Let me know if you have some comments or questions. Till next time, Happy coding.