Angular method not returning value

Question

I have a API call which fetches me a Random Image. I am trying to call following method and trying to use the variable returned, but it's only givig me empty results.

  fetchRandomArt():RawImportData<Artdata>{

    var tempRand:RawImportData<Artdata> = new  RawImportData<Artdata>();
    this.dataService.getRandomArt<RawImportData<Artdata>>().subscribe(
      (res: RawImportData<Artdata>) => {
        if(res){
          tempRand = res;
          this.isLoading=false;
        }
      },
      err => {throw("Can't connect to Server.")}
    );
    console.log("tempRand");
    console.log(tempRand);
    return tempRand;

  }

However i tested that API is indeed giving me result (inside if(res) diplays data), but i am not able to use that data outside the function.

Also, Is it possible to self execute this fuction after every 5 seconds?

EDIT:

I just noticed, the inner function is executing later,

out tempRand
RawImportData {}
in tempRand
{records: Array(1), pagination: {…}}

I know i can solve this by calling and subscribing n times, but i want to use values returned by this function only as i want it to self call.

UPDATE

Just want to update that the links tagged to this question do not answer this question, however following method does,

  public async fetchRandomArt():Promise<RawImportData<Artdata>>{
    const data = await this.dataService.getRandomArt<RawImportData<Artdata>>().toPromise();
    this.isLoading=false;
    console.log(data); 
    return data;
  }