Agfdhyk

This is probably pretty simple, but Angular isn't exactly my forte and it's taking me a bit more time than I anticipated. I have a service that calls an external API, and I want to get the variable on app initialisation and to use it in multiple other components.

I have the following service:

import { Injectable } from '@angular/core';

import { HttpClient } from  '@angular/common/http';



@Injectable({

  providedIn: 'root'

})

export class DatabaseConnectionService {



  API_URL: string = "http://localhost:4044";



  apiResult;



  constructor(private http: HttpClient) { 

    this.dbConn.getApiRoot()

    .subscribe(

      data => this.apiResult = { message: data['message'] }

    );

  }



  getApiRoot() { 

    return this.http.get<Apiroot>(this.API_URL);

  }



  returnApiResult() {

    return this.apiResult;

  }



}

In any of the other components, I need to be able to call the returnApiResult() and get the value of the variable, but it returns as empty since it's an observable (which I think should have already be assigned, since it's in the constructor for the service). Any help is appreciated.

In your constructor, change the code like so:

  import { shareReplay } from 'rxjs/operators';



  //...



  constructor(private http: HttpClient) { 

    this.apiResult = this.dbConn.getApiRot().pipe(shareReplay());

  }

By using the shareReplay operator, it will share the results among multiple subscribers, and replay the results. This way, your components can still subscribe:

  this.service.apiResult.subscribe(() => console.log("Done"))

But the data will only need to be loaded by the service once, on application load