combineLatest is fired only for first event

Question

I have 3 events which I want to combine, and when one of them is fired, to call the service. I used combineLatest, but it works only if the first event is fired by the filterChanged.

filterChanged is an local event, while the rest are events comed from the child component. How can I fix this, to emit one of the events, even from the page initialization?

filterChanged = new EventEmitter<boolean>();
paginatorChanged = new EventEmitter<MatPaginator>();
sortChanged = new EventEmitter<{}>();

ngAfterViewInit(): void {
   combineLatest(
      this.paginatorChanged,
      this.sortChanged,
      this.filterChanged
   ).pipe(
      startWith([null, null, null]),
      switchMap(value => {
      const paginator = value[0];
      const sort = value[1];
      const filters = value[2];
    
      return this.service.getFiltered(paginator, sort, filters);
   })).subscribe(data => this.data = data);
}    

applyFilter(): void {
  this.filterChanged.emit(true);
}

onPaginatorChanged(paginator): void {
  this.paginatorChanged.emit(paginator);
}

onSortChanged(sort): void {
  this.sortChanged.emit(sort);
}

thanks

Answer 1

The question isn't clear at the moment, but if you wish to trigger the combineLatest without the filterChanged observable emitting at least once, then I'd say you're using the startWith operator wrong. It should be piped to each source observable individually.

Try the following

ngAfterViewInit(): void {
  combineLatest(
    this.paginatorChanged.pipe(startWith(null)),
    this.sortChanged.pipe(startWith(null)),
    this.filterChanged.pipe(startWith(null))
  ).pipe(
    switchMap(value => {
    const paginator = value[0];
    const sort = value[1];
    const filters = value[2];
  
    return this.service.getFiltered(paginator, sort, filters);
    })
  ).subscribe(data => this.data = data);
}

Also for local multicast observables you could use RxJS Subject (or it's siblings) instead of using Angular specific EventEmitter.