Property ‘subscribe’ does not exist on type ‘Promise’ angular service call

Solution for Property ‘subscribe’ does not exist on type ‘Promise>’ angular service call
is Given Below:

trying to make a service call in Angular on init for a component, the server I’m fetching data from takes a bit to respond and as such I am trying to use promises to assign the data returned to this.stats in my component

when trying to write the function, I’m getting -> Property ‘subscribe’ does not exist on type ‘Promise<Observable>’ on my ‘subscribe’ (in my component) I’ve tried to rewrite the function several ways and I wasn’t able to get the error to change, I’m probably just doing this fundamentally wrong, but couldn’t find anything to match my exact case here so figured I’d reach out for any possible explanations…. maybe some type casting I need to change?

component

export class StatsComponent implements OnInit {
  @Input() stats: any
  @Output() onUpdateStats: EventEmitter<Object> = new EventEmitter()

  constructor(private specsService: SpecsService) { }

  async ngOnInit(): Promise<void> {
    await this.specsService.getStats().subscribe((response) => {this.stats=response});
  }

  updateStats(){
    console.log(this.stats)
    this.onUpdateStats.emit()
    
  }

}

services.ts

 async getStats():Promise<Observable<Object>>{
    return await this.http.get(`http://localhost:8888/fetchStats`)
   
  }

You shouldn’t mix promises with observables. Angular comes with RxJs which use the Observable design pattern, you should definitely stick to it and avoid using async/await.

Service :

getStats():Observable<Object>{
   return this.http.get(`http://localhost:8888/fetchStats`)
}

Component :

export class StatsComponent {
  @Output() onUpdateStats: EventEmitter<Object> = new EventEmitter();
  stats: Observable<Object>;

  constructor(private specsService: SpecsService) {
      this.stats = this.specsService.getStats();
  }

  updateStats(){
    console.log(this.stats)
    this.onUpdateStats.emit()
  }

}