angular 2 subscribe to boolean from service

Question

I have a service that has a changing boolean value, I want to subscribe to that boolean change in a component. How can this be achieved?

here is my service...

private subBoolShowHideSource = new Subject<boolean>();

subBoolShowHide$ = this.subBoolShowHideSource.asObservable();


showHide(eventValue: boolean) {
  this.subBoolShowHideSource.next(eventValue);
  console.log("show hide service " + eventValue);
}

and here is the component I am trying to get to read the bool value...

boolShowGTMDetails: any;
subscription: Subscription;

constructor(private service: ShowHideService){
  this.subscription = this.service.subBoolShowHide$.subscribe(
    (data:boolean) => {
      this.boolShowGTMDetails = data,
      error => console.log(error),
      console.log("winner winner chicken dinner");
    }
  );
}

Basically the change detection isn't working, any help would be much appreciated, thanks in advance!

Answer 1

Well I figured out my problem....

I had in both my components providers:[ShowHideService], this of course creates two different instances of the service. So I removed this from both components and simply call it once in my app.modules and everything is working properly. Rookie move on my end facePalm -_-

Answer 2

You have some formatting issues in your subscription. This should work:

   this.subscription = this.service.subBoolShowHide$.subscribe(
       (data:boolean) => { this.boolShowGTMDetails = data },
       error => console.log(error),
       () => console.log("winner winner chicken dinner")
   );