32. UI filters with startWith and combineLatest

Practice: list filters

This lesson brings two earlier concepts together: combineLatest to assemble state and startWith for each filter's starting value.

Why startWith on each source

Remember the combineLatest trap: until every source has emitted at least once, nothing comes out. If the filters are created lazily (from input events, say), the user might not touch a field for a while. So each source is given a "default" via startWith.

What happens, step by step

1. At 0ms both startWiths emit immediately → output Filter: /all.
2. At 20ms query$ changes to 'rxjs' → output Filter: rxjs/all.
3. At 40ms status$ changes to 'active' → output Filter: rxjs/active.

const { timer, combineLatest, map, startWith } = Rx;

const query$ = timer(20).pipe(
  map(() => 'rxjs'),
  startWith('')
);

const status$ = timer(40).pipe(
  map(() => 'active'),
  startWith('all')
);

const filters$ = combineLatest([query$, status$]).pipe(
  map(([query, status]) => 'Filter: ' + query + '/' + status)
);