My API is returning a large array of objects (categories), ranging from 50 to 200 categories at once. To handle this, I am creating a source observable that filters all categories into two sub-categories and presents them as separate properties within a single object.
public allCategories$: Observable<any> = this.categoryService.getAllCategories()
.pipe(
map((allCategories: CategoryModel[]) => {
const red = allCategories.filter((cat) => cat.color === 'red');
const blue = allCategories.filter((cat) => cat.color === 'blue');
const allCats = { red, blue };
return allCats;
}),
publishReplay(1),
refCount()
)
I then utilize the async pipe in Angular to subscribe and iterate over each stream representing red/blue categories using separate ngFors.
In my UI, each category corresponds to a checkbox. Users can search through all categories, check the checkboxes for specific ones, and then submit these selected categories with parameters to be processed elsewhere.
The challenges I am encountering include:
- These user interactions occur in two areas on the same page: a modal and a typeahead component.
- Both components should be able to read and write to the source observable without affecting the database or permanently changing state for these two components.
- I am struggling to figure out how to update the objects being pushed down after the subscription has started, as it does not seem efficient to continually push 50-200+ objects to a Subject whenever a checkbox is modified.
I have explored more complex rxjs patterns, but they seem excessive for the already complex angular application I am working on. What would be a simple yet effective architecture for managing this scenario?