CODEWITHSUNDEEP
javascriptangulartypescriptbehaviorsubject
Smokey Dawson
Smokey Dawson

Reputation: 9230

BehaviorSubject not working Angular 5

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(component) {
   this.popupSource.next(component);
}

then In my header component 

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

then in my header.html

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

then In my app component

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(component) 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(component) {
   this.popupSource.next(component);
}

and the in my app component 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

Upvotes: 4

Views: 9968

Answers (3)

kiki
kiki

Reputation: 1

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 component providers [] array, just remove the providers array, then it works

Upvotes: 0

Jean-Marc Roy
Jean-Marc Roy

Reputation: 1791

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.

Upvotes: 14

diopside
diopside

Reputation: 3062

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 component :

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

EDIT :

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

Upvotes: 3

Related Questions