How to unsubscribe to all the subscriptions on param change in angular

Question

I am developing page which can display job details of a job, for this purpose I am using NGRX store to dispatch actions and subscribing to it to display the data like below

this.store.dispatch(new LoadJobDetails(jobIdsObject));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobDetails = data;
            this.getJobHomeSteps();
          }
      }
    )
);

getJobHomeSteps() {
this.store.dispatch(new LoadJobStepsDetails(this.jobId));
this.subs.add(
    this.store.pipe(select(state => state.chatbotStoreData.jobHomeStepsDetailsObject)).subscribe(
      (data) => {
          if(data) {
            this.jobStepsDetails = data;
          }
      }
    )
);
}

and in ngondestroy I am unsubscribing to all the subscriptions like below,

ngOnDestroy(){
this.subs.unsubscribe();
}

This is working fine, but I have sidenav menu with list of jobs, on click of each job, job details page update with clicked job details. Here, on click of each job, intial subscription is happening many times and dispatch API's are calling multiple times because I can't able to unsubscribe previous job subscriptions.

How can I unsubscribe to all the subscriptions in that particular component on params change, or else any other way I can solve this problem. Any help would be appreciated, thanks!!!

Answer 1

 getSearchResultsObservable(control: FormControl): Observable<any> {
    return control.valueChanges.pipe(
      debounceTime(100),
      distinctUntilChanged(),
      switchMap(data => this.getSearchResults(control.value))
    );
  }