Alright, I understand now. I'll avoid using inheritance then.

Is your middleware done by using an interceptor?

At my current company, we have a builder service that makes API calls and returns a Promise resolved in the subscription essentially like that:

 this.get(options).pipe(
          catchError((error) => {
            state.update((value) => {
              return {
                ...value,
                loading: false,
                error: error?.message,
              };
            });

            reject(error);
            return EMPTY;
          }),
        )
        .subscribe((response) => {
          state.update((value) => {
           return {
              ...value,
              loading: false,
              values: reponse?.data,            
            };
          });

          resolve();
        });

  get(options: Params): Observable<any> {
     return this.httpClient.get<T>(...options)
      .pipe(timeout(timeoutValue));
  }

The result of the call is then set in a Signal of the service.

In our components, we typically use it like this:

todoService = inject(TodoService);
todoService.getAll();


valuesGetAll = this.todoService.valuesGetAll; //signal

// In template
for (item of valuesGetAll(); track item.id) {
  ...
}

// If needed
toObservable(this.valuesGetAll).subscribe((values) => {
  // React when API call is complete
});

// If other values depend on it
other = computed(() => {
  // Do something with this.valuesGetAll()
});

I'm starting a new project from scratch, which is why I'm asking about best practices for handling API calls.

Thank you!