Angular 10 method that returns value from REST API

Question

Summary of Issue : Angular method does not wait till response is received from REST call before RETURNING the value

Description of Problem:

1. I have an endpoint that once consumed returns a date from the database. What I intent to do is write a common method in Angular (I have created a method inside a provider service) that every time called by any component will do this REST call and return the date from the response.
2. Below is the method that does GET REST call

getDateFromDb() {    
   return this.httpClient.get(this.host + "/api/get-date"); 
}

3. Below is the method inside provider service that calls getDateFromDb() method and should return date from the response

async fetchDate() {
   await this.rest_service.getDateFromDb().subscribe((response: any) => {
     if(response)
       return response.date;
  }, error => {
      this._alert.alertError('Error occurred');
  });
}

4. I tried async/await, promises, observables but could not find workable solutions. Let me know if anything is wrong with the implementation.

5. I also cannot use local variables as well as this fetchDate() method is inside provider service and not in component. So cannot use something like this.

async fetchDate() {
   await this.rest_service.getDateFromDb().subscribe((response: any) => {
     if(response)
       this.date = response.date; //Cant' do
  }, error => {
      this._alert.alertError('Error occurred');
  });
}

6. I want to be able to call fetchDate() method in any component and assign the value. Eg

this.date = this._provider_service.fetchDate(); //Inside component A

or

let obj = { //Inside component B
 foo: //some default value
 date: this._provider_service.fetchDate();
}

Answer 1

I think you are overcomplicating things. Try this on your component,

//you need to import service for getDateFromDb

getDateFromDb().subscribe((response: any) => {
    //or whatever you need. this way assignment will be made when response is received by the component
       this.date = response.date

  })

Answer 2

There was no simple way to accomplish this without using promises.

Method that calls actual API

getDateFromDb() {    
   return this.httpClient.get(this.host + "/api/get-date"); 
}

Method in provider

fetchDate(): Promise<Object> {
   return this.rest_service.getDateFromDb();
}

Other components calling fetchDate() method had to use .then() to write dependent code in it.

this._provider_service.fetchDate().then((data: any) => {
  if(data) {
     this.date = data;
  }
}); //Inside component A

or

foo() {
this._provider_service.fetchDate().then((data: any) => {
      if(data) {
         let obj = { //Inside component B
            foo: //some default value,
            date: data,
         }
      }
    })
}