subscribing to a subject not working for first time oninit

Question

i have a service which get some data from server and the updates some subject and in my component's ngOnInit function i am subscribing to that subject. I have confirmed subject is being updated correctly.

following is my service's function which gets data from server and updated the subject.

getInboxData(id?) {
    this.inboxID = id;
    this.loadingData.next( // tells to start showing loading animation
    {
      showloading: true,
      clearDocuments: this.shouldClearDocuments()
    });

    this.getInboxCount();
    this.dashboardService.getInbox(id, this.page)
      .subscribe((response) => {
        for (const inbox of response['results']) {
          this.documents.push(inbox.document);
          // tells to stop showing loading animation
          this.loadingData.next({showloading: false, clearDocuments: this.shouldClearDocuments()});
        }
        if (response.next != null) {
          this.page++;
          // this.getInboxData(id);
        }else {
          this.page = 1; // reset
        }
        this.documentsData.next(response);

      });
  }

i am subscribing to documentsData in my component. following is component's code.

ngOnInit() {
    this.dashboardDataService.getInboxData(); 
    this.dashboardDataService.documentsData
      .subscribe((response) => {
        this.isLoadingMoreResult = false;
        this.loading = false;

        for (const entry of Object.values(response.results)){ // save new entries
          this.documents.push(entry);
        }

        this.documentsLoaded = Promise.resolve(true);
        this.filteredDocuments = this.documents; // both should be same when user gets new data
        console.log(this.filteredDocuments);
        $('#documentContentSearch').val(''); // reset text in searchBar

        // if (this.documents.length >= 8) { // if list is more than 8 then show scroll
        $('#tableContainer').css({'height': $('#mySideBar').innerHeight() - 195});
        const $myThis = this;

        $('#tableContainer').scroll(function(){
          if (!$myThis.isLoadingMoreResult) { // if it is not already loading result
            $myThis.loadMoreResults();
          }
        });

        $('#dropdown').scroll(function(){
          if (!$myThis.isLoadingMoreResult) { // if it is not already loading result
            $myThis.loadMoreResults();
          }
        });

        // load two results in first time
        if (this.dashboardDataService.page === 2) {
          this.loadMoreResults();
        }
    });
  }

but it is not getting response from suject when i navigate to this component from another component. But upon renavigating to same component from this component it is getting response correctly. can somebody help me understanding what is goin on here?

Answer 1

You subscribe to the subject after requesting the data.

You have to subscribe and then request the data.

ngOnInit() {
    this.dashboardDataService.documentsData.subscribe(...);
    this.dashboardDataService.getInboxData(); 
}