Subject doesn't emit data

Question

I have an app which receives data from user and validate them in the form. When validation is true button is getting enabled and user is getting permitted to submit his order in this scenario.

I don't know why in this component my subjects don't work. I mean I can .next(value) in a component and in service I can console.log(value) to check its getting arrived to service or not.

I can see that in service is getting received but ,that received value isn't being subscribed in the component I want to use them. I stopped running projects but couldn't be fixed. Here is what I tried:

AuthService.ts

  emailSubject=new Subject<string>();
  getEmail(value)
  {
    console.log(value);
    this.emailSubject.next(value); //prints email to the console correctly
  }

CarService.ts

export class CarService
{
    carrierSubject=new Subject<number>();
    orderSubject=new Subject<Order[]>();
    totalCostSubject=new Subject<number>();
    lastTotalCostSubject=new Subject<number>();
  getId(myIndex:number)
   {
    this.carrierSubject.next(myIndex);
   }
 setOrders(value)
   {
     console.log(value);
     this.orderSubject.next(value);
   }
  setTotalCost(value)
   {
     this.totalCostSubject.next(value);
   }
   lastSetTotalCost(value)
   {
     this.lastTotalCostSubject.next(value);
   }

CarPayment.ts

export class CarPaymentComponent implements OnInit {
  car:Car; 
  selectedCar:string;
  somePlaceholder : number = 0;
  myArray:Order[];
  email:string;
  constructor(private carService:CarService,private authService:AuthService) { }
  ngOnInit() {
    this.carService.carrierSubject.subscribe(value=>
      {  
         this.car=this.carService.getCar(value);
         this.selectedCar=this.car.brand;
      });
      this.carService.lastTotalCostSubject.subscribe(value=>
        {  
         this.somePlaceholder=value;
        });
        this.carService.orderSubject.subscribe(value=>
          { 
            this.myArray=value;
          }
          );
        this.authService.emailSubject.subscribe(value=>
          {
            this.email=value;
          });
    }
    onSubmit()
    {
      console.log("ORDER INFO")
      console.log('This order ordered by:'+this.email);
      console.log("Ordered Car:"+this.selectedCar);
      console.log("Ordered Parts:"+this.myArray);
      console.log("Total Cost:"+this.somePlaceholder);
    }
}

Answer 1

As @lealceldeiro and @FatemeFazli have mentioned, you'd need to use BehaviorSubject or ReplaySubject. The reason you code is not working is because your observables haven't fired any value yet. Essentially, when you do .subscribe, you are hooking into change event. But in your case, the change hasn't been fired yet.

AuthService.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'; //<----Add this line

@Injectable()
export class AuthService {
  emailSubject = new BehaviorSubject<string>("test@test.com"); //<--- provide an initial value here
  getEmail(value) {
    console.log(value);
    this.emailSubject.next(value); //prints email to the console correctly
  }
}

CarService.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class CarService {
  carrierSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
  orderSubject = new BehaviorSubject<Order[]>([]); //<-- provide an initial value here
  totalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here
  lastTotalCostSubject = new BehaviorSubject<number>(0); //<-- provide an initial value here

  getId(myIndex: number) {
    this.carrierSubject.next(myIndex);
  }
  setOrders(value) {
    console.log(value);
    this.orderSubject.next(value);
  }
  setTotalCost(value) {
    this.totalCostSubject.next(value);
  }
  lastSetTotalCost(value) {
    this.lastTotalCostSubject.next(value);
  }
}