I cant seem to figure out what the issue is,

I have a service that has a behavior subject like so...

popupSource = new BehaviorSubject<any>('');

popup(ponent) {
   this.popupSource.next(ponent);
}

then In my header ponent

popupClick() {
    this._service.popup('example');    
}

then in my header.html

<button (click)="popupClick()"></button>

then In my app ponent

ngOnInit() {
    this._service.popupSource.subscribe((result) => {
       console.log(result);
    })
}

so whats happening is the click is firing the this._service.popup('example'); but its never hitting the subscription...

I've put breakpoints on each function and It succesfully reaches this.popupSource.next(ponent) but then nothing?? Every Time I click the button I should be getting the console log.

Im not sure what Im doing wrong... Ive left out code for brevity sake so please let me know if you need more information

EDIT

Ive also tried doing

private popupSource = new BehaviorSubject<any>('');

getPopup = this.popupSource.asObservable();

popup(ponent) {
   this.popupSource.next(ponent);
}

and the in my app ponent listend to the getPopup instead

ngOnInit() {
    this._service.getPopup.subscribe((result) => {
       console.log(result);
    })
}

and that's not working either, I cant figure out what the problem is...

Thanks

I cant seem to figure out what the issue is,

I have a service that has a behavior subject like so...

popupSource = new BehaviorSubject<any>('');

popup(ponent) {
   this.popupSource.next(ponent);
}

then In my header ponent

popupClick() {
    this._service.popup('example');    
}

then in my header.html

<button (click)="popupClick()"></button>

then In my app ponent

ngOnInit() {
    this._service.popupSource.subscribe((result) => {
       console.log(result);
    })
}

so whats happening is the click is firing the this._service.popup('example'); but its never hitting the subscription...

I've put breakpoints on each function and It succesfully reaches this.popupSource.next(ponent) but then nothing?? Every Time I click the button I should be getting the console log.

Im not sure what Im doing wrong... Ive left out code for brevity sake so please let me know if you need more information

EDIT

Ive also tried doing

private popupSource = new BehaviorSubject<any>('');

getPopup = this.popupSource.asObservable();

popup(ponent) {
   this.popupSource.next(ponent);
}

and the in my app ponent listend to the getPopup instead

ngOnInit() {
    this._service.getPopup.subscribe((result) => {
       console.log(result);
    })
}

and that's not working either, I cant figure out what the problem is...

Thanks

• javascript
• angular
• typescript
• behaviorsubject

• 1 Are you sure that you have the same instance of the service ? where do you provide it ? – Jean-Marc Roy Commented Jun 14, 2018 at 23:23
• I have two seperate modules a main module and an app module, the app ponent is in the appModule and the header ponent is in the mainModule but I provide the service in both modules or should I be exporting it in the appModule and then grabbing it from there in the mainModule?? – Smokey Dawson Commented Jun 14, 2018 at 23:31
• 2 You should not provide in two different module. It creates an instance for each module, that's why it is not working. – Jean-Marc Roy Commented Jun 14, 2018 at 23:35
• @GeoAstronaute so how should I be providing it?? – Smokey Dawson Commented Jun 14, 2018 at 23:36
• @GeoAstronaute Ive taken it off the provider list in mainModule and its still not working.. – Smokey Dawson Commented Jun 14, 2018 at 23:38

3 Answers 3

Your issue here is that you provide your service in two different modules, that end up with two instances of your service. The simplest way if you are using Angular v6 is to use the providedIn flag in your service:

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

@Injectable({providedIn: 'root'})
class myService {}

With this way you don't need to provide your service in the providers array of any module, it will be automatically provided in the root injector.

Documentation about this can be found here : Angular providers.

If your are using Angular v5 you should only provide your service in your AppModule.

In your service, write a new method like this:

popupSource = new BehaviorSubject<any>('');

getPopupSource() { 
   return this.popupSource.asObservable();
}

And subscribe to that instead of subscribing directly to the subject itself. You could just add the 'asObservable()' part whenever you subscribe to it instead of creating an entirely new method, but I like the separate method so I can keep the Subject private, and I usually subscribe to something multiple times in different places throughout an app, so it cuts down on repetition.

In your ponent :

this._service.getPopupSource().subscribe( result => { etc...})

EDIT :

Demo recreation of your scenario - https://stackblitz./edit/angular-n6esd5

You may not have the same instance of service, my same problem was that I had @Injectable({ providedIn: 'root'}) for my service, but also I put this service in the ponent providers [] array, just remove the providers array, then it works