Objective: Creating a Combined Filter with 3 Inputs to refine a list
Conditions:
- Users are not required to complete all filters before submission
- The first submit occurs when the user inputs data
- Inputs are combined after more than one is provided
Approach: I transfer input data from the 3 different components to Subjects in a Service acting as an event emitter between input and combination. This allows for reusability and selection of various inputs as necessary.
export class FilterInputStoreService {
public selectedTypesHandler = new Subject<string>();
public selectedPrivacyOptionsHandler = new Subject<boolean>();
public searchInputHandler = new Subject<boolean>();
constructor() {}
}
In the filter combination component, I "listen" for signals sent by subjects and merge them using mergeWith.
this.filterInputStore.selectedTypesHandler
.mergeWith(this.filterInputStore.searchInputHandler, this.filterInputStore.selectedCurrenciesHandler )
.map(() => {
this.combinedDataObject = {
Values are combined here, which is irrelevant for the question
};
}),
tap(() => {
this.filterService.newFilterData(this.combinedDataObject);
})
)
.subscribe();
Issue:
- An error states that mergeWith cannot be used with Subjects
- Operators like combineLatest do not work as they require input from all sources
- BehaviorSubject cannot be utilized because it emits a null initial value, leading to filter crashes