9

I've created an Angular service that basically sets an object with some user information. When I change the user, the service emits an observable, captured by some sibling components to update the info. The problem is that the first time I set the data, there's no one subscribed yet, so I get an undefined value. I've read about converting the observable to 'hot' using publish() or share() but I'm pretty new to RxJS and I still haven't understood how it works at 100% so I'm a little lost.

The service code (the relevant part):

getFwcUser() : Observable<FwcUser> {
  return this.subjectFwcUser.asObservable();
}

setFwcUser(user : FwcUser) {
  this.fwcUser = user;

  this.subjectFwcUser.next(this.fwcUser);
}

NOTE: FwcUser is an interface with some user fields. I run setFwcUser inside a button handler to choose the user.

The late subscriber (component code):

ngOnInit() {
  this.fwcUserService.getFwcUser()
    .subscribe(
      (user : FwcUser) => { console.log('Received: ', user); this.fwcUser = user; }
  );
  [......]
}

Always prints: 'Received: undefined'. NOTE: The component is inside an '*ngIf="fwcUser"', so it's being loaded when I call to 'setFwcUser' from a sibling component.

How could I get this component to read the last value?

Also, could someone recommend a good resource to learn about RxJS for beginners? I'm reading a couple of books on Angular4 but none of them explain it clearly...

Thanks!

dota2pro
  • 7,220
  • 7
  • 44
  • 79
Fel
  • 4,428
  • 9
  • 43
  • 94
  • Possible duplicate of [How to get last value when subscribing to an Observable?](https://stackoverflow.com/questions/37174598/how-to-get-last-value-when-subscribing-to-an-observable) – ruffin Sep 20 '18 at 19:44
  • maybe it wasn't available in rsjx<6 but there is ReplaySubject that "replays" the last emission on subscription. see https://coryrylan.com/blog/rxjs-observables-versus-subjects – DKebler Jan 03 '20 at 17:34

1 Answers1

14

BehaviorSubject is the answer here. Rather than a standard subject (Observable) that just emits values as they come in, a BehaviorSubject emits the last value upon subscribe(). You can also get the last value manually using the BehaviorSubjects getValue() method.

One note to make about the code below is that the null block in the BehaviorSubject declaration represents the initial value of the BehaviorSubject upon initialization. You could either leave it, or pre-populate it with a value.

Service

EDITED: Corrected a couple of typing errors.

fwcUser: BehaviorSubject<FwcUser> = new BehaviorSubject<FwcUser>(null);
fwcUser$ = this.fwcUser.asObservable();

// Set the value of the fwcUser
updateFwcUser(user) {
    this.fwcUser.next(user);
}

Component

// Subscribe to the BehaviorSubject
ngOnInit() {
    this.fwcUserService.fwcUser$.subscribe(_fwcUser => {
        this.fwcUser = _fwcUser
    }
}

// Get the current (previously emitted) value manually
getFwcUser() {
    this.fwcUser = this.fwcUserService.fwcUser.getValue();
}
Fel
  • 4,428
  • 9
  • 43
  • 94
joshrathke
  • 7,564
  • 7
  • 23
  • 38
  • Thanks for your quick reply! And how would the setFwcUser() function look like? Should it be something like this:? `this.fwcUser = new BehaviorSubject(user);` – Fel Sep 19 '17 at 15:08
  • I updated my answer with the best way to update a BehaviorSubject. You'll want to add a function in the service that accepts the new value you want to emit and then use the `next()` function to push out the new value. – joshrathke Sep 19 '17 at 15:15
  • Hi again! Sorry I couldn't test it before, I've been really busy... I followed your instructions and it works perfectly! Thank you very much :) – Fel Sep 20 '17 at 09:55
  • Is there a way to use that to get the last 5 emitted, not just one? – Leonardo Rick Oct 16 '20 at 13:40