Cannot set service data inside subscribe in Angular

Issue

I want to set shared service data inside subscribe method my page structure is

i have to access data set from one component app.component in home component and header component.

 this.sharedService.setData({title: this.title, logo: this.logo});

app.component.ts

  setData(): void {
    this.http.get(this.baseUrl+'api/content').subscribe(result  => {
      this.title=result['response'].title;
      this.logo=result['response'].logo;
      this.sharedService.setData({title: this.title, logo: this.logo});
    }); 
    
  }

but in this case service data is set when i access it in any other component getting blank data for title and logo but when i pass static data (Not is subscribe method API call) then it's value is getting passed to other components.

Service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { BehaviorSubject } from 'rxjs';

export interface SharedData {
  title: string;
  logo: string;

}

@Injectable({
  providedIn: 'root'
})

export class SharedService  {

  private sharedData$ = new BehaviorSubject<SharedData>({title: '', logo: ''});
  sharedData = this.sharedData$.asObservable();

  constructor() { }

  setData(data: SharedData): void {
    this.sharedData$.next(data);
  }
}

Any Solution Thanks

Solution

BehaviourSubject must be initialized with a starting value.

In your code you are starting with empty strings for title and logo, so, if you subscribe to it in any component before calling setData (which makes the get call), the new subscriber will get that initial "empty" value.

You could try replacing it with ReplaySubject(1). Then, if setData has not been called yet at the moment of subscribing, you can apply whatever logic you need to make that call.

If you want to keep using BehaviourSubject, you can set the initial value to null and act accordingly in your subscribers.

** EDIT **

---

After playing a little with the Stackblitz set up by another user (and lacking the proper response object that your API is returning), I think the problem is not related to the Subjects or the subscription, but may be located in this two lines of your code:

this.title=result['response'].title;
this.logo=result['response'].logo;

You could try to make the following changes in your app.component.ts:

setData(): void {
    this.http.get(this.baseUrl+'api/content').subscribe(result  => {
      /* Original code
      this.title=result['response'].title;
      this.logo=result['response'].logo;
      */ 
      
      /* New code */
      this.title=result.title;
      this.logo=result.logo;
      this.sharedService.setData({title: this.title, logo: this.logo});
    });     
}

Notice I simply removed the ['response'] property of the result object, as I'm almost positive there's no such property in what the API is returning to your app. But without seeing the actual response from your API, is difficult to give a proper answer.

Unless the response is an array, but in such case you would most likely need to point to an index position. Again, it would really help if you could paste the actual response from your API here so we could guide you better.

Answered By - JuanDeLasNieves