La suscripción a Http no funciona en el Servicio Angular.

Estoy trabajando en un proyecto y necesito recuperar datos de un servidor personalizado. Creé un servicio Httpclient para manejar solicitudes y me encontré con este problema: cuando intento realizar la suscripción para pasar datos al componente, no pasa nada, pero si hago la suscripción en el componente, todo funciona bien. Resumo el código a continuación:

El componente:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, catchError, map, Observable, of} from 'rxjs';
import { Food } from '../api/api-models';
import { ApiService } from '../api/api.service';

@Component({
  selector: 'app-in-home-list',
  templateUrl: './in-home-list.component.html',
  styleUrls: ['./in-home-list.component.css']
})
export class InHomeListComponent implements OnInit {

res: Food[];
  error: string;

constructor( private api: ApiService, private http: HttpClient){
  }

ngOnInit() {
    //this.http.get<food[]>('https://localhost:5001/').pipe(catchError(this.api.handleError)).subscribe({next: r => this.res = r, error: e => this.error = e});
    [this.res, this.error] = this.api.getInHomeList();
  }
}

La línea comentada es la que funciona aquí, pero no en el servicio. La que no está comentada es lo que quiero que funcione correctamente.

El servicio:

import { Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Food } from './api-models';
import { catchError, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ApiService {

private result: Food[];
  private error: string;

constructor( private http: HttpClient) {

}

getInHomeList(): [Food[], string] {

this.http.get<food[]>('https://localhost:5001/').pipe(catchError(this.handleError)).subscribe({next: r => this.result = r, error: e => this.error = e});

return [this.result, this.error];
}

handleError(error: any) {
    let errorMessage = "";
    if (error.error instanceof ErrorEvent) {
        // error del lado del cliente
        errorMessage = `Error: ${error.error.message}`;
    } else {
        // error del lado del servidor
        errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(() => new Error(errorMessage))
  }
}

El @NgModule en app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    InHomeListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    ApiService
  ],
  bootstrap: [AppComponent]
})

Soy un poco nuevo en Angular, así que tal vez me esté perdiendo algo o no entendí bien cómo funciona realmente Observable.</food[]></food[]>