Angular Observable & Subject not getting the data

Question

I'm very new in angular.

I have created one service given below.

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WizardDataService {

  constructor() { }

  private txtBxServiceID=new Subject<any>();

  setTxtBxServiceID(value:any){
    this.txtBxServiceID.next({txtBxServiceID:value});
  }

  getTxtBxServiceID(): Observable<any> {
    return this.txtBxServiceID.asObservable();
  }


}

I'm setting the txtBxServiceID value in another component on form submission. given below.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from  '@angular/forms';
import { Router } from  '@angular/router';
import {WizardDataService} from '../services/wizard-data.service'

@Component({
  selector: 'app-discover-device',
  templateUrl: './discover-device.component.html',
  styleUrls: ['./discover-device.component.scss']
})
export class DiscoverDeviceComponent implements OnInit {

  discoverDeviceComponentForm: FormGroup;
  isSubmitted  =  false;

  constructor(private router: Router, private formBuilder: FormBuilder,private wizardDataService : WizardDataService) { }

  ngOnInit() {
    this.discoverDeviceComponentForm  =  this.formBuilder.group({
      txtBxServiceID: ['',  Validators.required]
  });
  }
  get formControls() { return this.discoverDeviceComponentForm.controls; }

  dicoverDevice(){
    this.isSubmitted=true;
    if(this.discoverDeviceComponentForm.invalid){
      return;
    }
    this.wizardDataService.setTxtBxServiceID(this.discoverDeviceComponentForm.value.txtBxServiceID);

    this.router.navigateByUrl('mits-update/device-details');
  }
}

now I am trying to access the service on another component. Like below.

import { Component, OnInit} from '@angular/core';
import {WizardDataService} from '../services/wizard-data.service';


@Component({
  selector: 'app-device-mits-update',
  templateUrl: './device-mits-update.component.html',
  styleUrls: ['./device-mits-update.component.scss']
})
export class DeviceMitsUpdateComponent implements OnInit {

  txtBxServiceID:any="";

  constructor(private wizardDataService:WizardDataService) {

   this.wizardDataService.getTxtBxServiceID().subscribe(value =>{
      this.txtBxServiceID=value.txtBxServiceID;
    });
  }

  ngOnInit() {
  }

}

then I am displaying this value on my HTML like

 <td>Service Id</td>
        <td>{{txtBxServiceID}} </td>

My issue is the value is not displaying here. So can anyone help me here to find what is the mistake I have done here?

Answer 1

As suggested by Daniel, you can use BehaviorSubject. However, it requires an initial value. Since you are not providing any value you can use ReplaySubject .

private txtBxServiceID = new ReplaySubject<any>(1);

Answer 2

You have a simple Subject . You subscribe to it in the new component only after the first component has set the value. Subject does not replay previous values to new subscribers. It also doesn't hold the latest value and sends that to new subscribers.

Most likely, you want a BehaviorSubject , it will store the latest value and send it to new subscribers.

If you want all previous values sent to new subscribers, you need to use a ReplaceSubject instead.

So, use the following code instead of what you have now:

private txtBxServiceID = new BehaviorSubject<any>(null);