this.userService.info$.subscribe() not working in ngoninit

Question

Hello Guys i am trying to build create post section of a website in mean stack. Currently i am able to upload image title and tag from the form to backend and it is saving into mongodb also successfully. But when data is coming in form of res.send and when i am trying to get it to the home component file with the help of observable. I am unable to do this. Instead of giving complete flow of documents lets just pick the pain point. When i am trying to send the data from one component to other with help of observable i am unable to do this as the inner function is not at all responding also i am not even able to print hello in that subscribe function

`home.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [UserService]
})

export class HomeComponent implements OnInit {
  tag: string;
  title: string;

  constructor(public userService: UserService) { }

  ngOnInit(): void {
    console.log("hello");
    this.userService.info$.subscribe(
      (res)=>{
        console.log("hello from subscribe")
        console.log(res)

        this.tag=res.tag;
        
        console.log(this.tag);
        
        this.title=res.title;
      },
      (err)=>{
        console.log(err)
      }
    )
  }

}

user.service.ts

receivedInfo = new Subject<any>();
  info$ = this.receivedInfo.asObservable();


  constructor(public http: HttpClient) { }

  sendMessage(message: any){
    this.receivedInfo.next(message);
  }

uploadpost.component.ts

import { Component, OnInit, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from "@angular/router";
import { UserService } from '../shared/user.service';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment'

@Component({
  selector: 'app-uploadpost',
  templateUrl: './uploadpost.component.html',
  styleUrls: ['./uploadpost.component.css'],
  providers: [UserService]
})
export class UploadpostComponent implements OnInit {

  images: any;
  showSuccessMessage: string;
  serverErrorMessages: string;

  constructor(public userService: UserService, public router: Router, public http: HttpClient) { }

  ngOnInit(): void {
  }

  selectImage(event: any) {
    const file = event.target.files[0];
    console.log(file)
    this.images = file;
  }

  onSubmit(form: NgForm){
    var formData = new FormData();
    formData.append('file', this.images);
    formData.append('title', this.userService.selectedPost.title)
    formData.append('tag', this.userService.selectedPost.tag)
    formData.append('img', this.userService.selectedPost.img)
    console.log(formData)

    this.userService.upload(formData).subscribe(
      (res)=>{
        console.log("hello i am response from 3000")
        console.log(res)
        /* this.userService.infoReceived.emit(res); */
        this.userService.sendMessage(res)
        this.showSuccessMessage = 'Post Uploaded Successfully!';
        setTimeout(() => (this.showSuccessMessage = ''), 4000);
        this.resetForm(form)
        window.location.href = '/home';
      },
      (err)=>{
        this.serverErrorMessages = 'Something went wrong.Please contact admin.';
      }
    )
  }

  resetForm(form: NgForm) {
    this.userService.selectedPost = {
      title: '',
      tag: '',
      img: '',
    };
    form.resetForm();
    this.serverErrorMessages = '';
  }
}

`

cross-communicating-components are uploadpost and home in home component fir console.log("hello") is printing but not 2nd one this simply means it is not working and also in error block also nothing is printing

Answer 1

1. It'd be elegant to use Angular router to route from uploadpost component to home component. It'd also allow you to send additional information without the need for the singleton.

2. That said, RxJS Subject would only emit after the subscription. Instead you could use RxJS ReplaySubject with buffer 1. It'd "hold" onto to current value and emit immediately to future subscribers.

receivedInfo = new ReplaySubject<any>(1);
info$ = this.receivedInfo.asObservable();

constructor(public http: HttpClient) { }

sendMessage(message: any){
  this.receivedInfo.next(message);
}