3

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

AlleXyS
  • 2,476
  • 2
  • 17
  • 37

1 Answers1

2

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.

ruth
  • 29,535
  • 4
  • 30
  • 57
  • That's great, thanks. I tought I can use startWith() for all the events result, but was needed to specify it for each. This is a refactor, after the removing of all filters, sort and paginators from the smart component, I'll change the Events with Subject (inside a service, or even ngrx selectors (because is already used in the app)). Thanks a lot – AlleXyS Jan 11 '21 at 10:54