Data not getting fetched into service. Unable to subscribe in other components

Question

userService.ts

 private APIUrl: string = environment.APIUrl;
  constructor(private inService: API,
    private httpClient: HttpClient) { }

  private _userDataDashboard$ = new ReplaySubject<UserDetailsDashboard>(1);


  getUserDetailsSubject(): Observable<UserDetailsDashboard> {
    return this._userDataDashboard$.asObservable(); 
    
  }


  refreshUserData(): Observable<void> {
    
      const headers = new HttpHeaders()
        .set('Authorization', 'Bearer ' + localStorage.getItem(AppConstants.TOKEN));
    return this.httpClient.get<any>(this.APIUrl, {headers: headers}).pipe(
      tap((response: any) => {
        // notify all subscribers of new data
        this._userDataDashboard$.next(response.data );
        
      })
    );
  }

I have called this function in a section where the user submit details: Profile.ts

submitBasicDetails(basicDetails: {}) {
    this.isLoading = true;
    this.inService.submitBasicDetails(basicDetails).subscribe(
      (response: any) => {
        this.userService.refreshUserData();
       
 )}

When I am calling a parameter of fullName in Dashboard.html, it does not reflect

<h1>Hi {{data.firstName}}</h1>

  

Please help me identify the error.

Answer 1

You have to call subscribe on refreshUserData() as Observable doesn't emit anything until you subscribe. So you can modify your submitBasicDetails function to look like this:

submitBasicDetails(basicDetails: {}) {
  this.isLoading = true;
  this.inService.submitBasicDetails(basicDetails)
  .pipe(
    switchMap((response: any) => this.userService.refreshUserData())
  )
  .subscribe()
})