Q:

How to make a generic method that calls different services

I'm working with Angular and have this method:

  loadPagedRecords() {
    this.loadingSpinner = true;
    this.subPage = this.administratorService.getPage(AppSettings.RECORDS_PER_PAGE)
      .subscribe(resp => {
        this.page.recordsList = resp.content;
        this.page.totalElements = resp.totalElements;

        this.pager = this.pagerService.getPager(this.page.totalElements, 1, AppSettings.RECORDS_PER_PAGE);
        this.pagedItems = this.page.recordsList.slice(this.pager.startIndex, this.pager.endIndex + 1);

        this.loadingSpinner = false;
      }, (error) => {
        this.loadingSpinner = false;
      });
  }

This method is responsible for loading all records of Administrators in it Listing Component. The problem is I have others Listing Components (Clients, Services, Payments) and I repeat the same method (the difference is the service that will be called) in all of those Components.
What I want to do is to create a Abstract Class with this method but the variable it subscribes needs to be generic. In the example above it makes a subscribe to the administratorService . 
How can I make it generic to works with all my listing components?
EDIT:
I made some changes and now the method is working the way I wanted... But not sure if this is a good solution:

export abstract class BaseList {

       constructor(protected service: any, protected pagerService: any) {}

  loadPagedRecords() {
    this.loadingSpinner = true;
    this.subPage = this.service.getPage(AppSettings.RECORDS_PER_PAGE)
      .subscribe(resp => {
        this.page.recordsList = resp.content;
        this.page.totalElements = resp.totalElements;

        this.pager = this.pagerService.getPager(this.page.totalElements, 1, AppSettings.RECORDS_PER_PAGE);
        this.pagedItems = this.page.recordsList.slice(this.pager.startIndex, this.pager.endIndex + 1);

        this.loadingSpinner = false;
      }, (error) => {
        this.loadingSpinner = false;
      });
  }


}

export class ListAdministratorsComponent extends BaseList implements OnInit {

  constructor(private titleService: Title, private router: Router,
    protected administratorsService: AdministratorsService,
    protected pagerService: PagerService,
    private toastrService: ToastrService
  ) { 
       super(administradoresService, pagerService); 
    }

  ngOnInit() {
       this.loadPagedRecords();
  }

}

What do you think?

A:

Not knowing the exact structure of your application, so I cannot say if there is a better way, but you could think about using an abstract class:
export abstract class RecordViewer<T> {
  abstract readonly serviceGetter = (...args?: any[]) => Observable<T>;

  loadPagedRecords() {
    this.loadingSpinner = true;
    this.subPage = this.serviceGetter(AppSettings.RECORDS_PER_PAGE).pipe(
      finalize(() => this.loadingSpinner = false)
    ).subscribe(resp => {
      this.page.recordsList = resp.content;
      this.page.totalElements = resp.totalElements;
      this.pager = this.pagerService.getPager(
        this.page.totalElements, 1, AppSettings.RECORDS_PER_PAGE
      );
      this.pagedItems = this.page.recordsList.slice(
        this.pager.startIndex, this.pager.endIndex + 1
      );
    });
  }
}

which you can then extend from your component:
export class AdministratorComponent extends RecordViewer<Administrator> {
  readonly serviceGetter = this.administratorService.getPage;

  constructor(private administratorService: AdministratorService) {}
}

