Getting updated values from Observable's subscription

Question

I have noticed something about Observables in Angular 2 that I cannot explain and hope a good sould sheds light on me.

My understanding was that when subscribing to an Observable you have basically two strategies to consume the value it emits:

stream combined with async pipe, as in:

myTextSubscription$ = SomeObservable.subscribe();

{{ myTextSubscription$ | async }}

or extract the value and bind it from within the subscribe handler:

myTextSubscription$ = SomeObservable.subscribe(text => this.text = text);

{{ text }}

Well, the problem is that I have already tried a couple of times to use the latter approach and I never managed to get the text value updated, unless I invoke this.cdRef.markForCheck() within the handler. I guess invoking the changeDetection manually should not be required for such a basic scenario - at least I haven't seen that used in any of screencasts or tutorials.

Does this sound familiar to anyone? Is it my wrong understanding of the method, or is it perhaps a bug in Angular 2?

Edit:

The code above has been abstracted as I believed the problem could be explained on a more abstract level.

I cannot recall the first case when it bit me, but now the Observable comes from ngrx store, so it's basically something along these lines:

this.text$ = store.let((state$: Observable<State>) => {
  return state$.select(state => state.text);
});

Can you post more code? Like how is `SomeObservable` created? And what change detection strategy have you put on your component? — Poul Kruijt, Nov 03 '16 at 09:49
No you HAVE to run changedetection yourself. See http://stackoverflow.com/questions/38445670/angular-2-view-will-not-update-after-variable-change-in-subscribe/40707669#40707669 — Flosut Mözil, Nov 20 '16 at 18:26

score 1 · Answer 1 · answered Nov 03 '16 at 09:49

1

This usually happens if SomeObservable is somehow initialized outside Angulars zone or uses some API that is not coverted by zone.js.

We would need to see how SomeObservable is exactly constructed to know for sure.

answered Nov 03 '16 at 09:49

Günter Zöchbauer

623,577
216
2,003
1,567

Now we need to see how and where `store` is initialized and where it comes from (what package, GitHub repo). – Günter Zöchbauer Nov 03 '16 at 10:07
The app has been scaffolded following the [ngrx example app](https://github.com/ngrx/example-app), so `store` comes from the StoreModule – user776686 Nov 03 '16 at 10:42
That should work. Sorry, no idea why it doesn't for you. Is this in Chrome or some other browser? – Günter Zöchbauer Nov 03 '16 at 10:45

score 1 · Accepted Answer · edited Aug 09 '17 at 22:59

In fact, you shouldn't subscribe to the observable when using async. It's why async is that awesome. It handles both subscribe AND unsubscribe when your component is initialized/destroyed.

So instead of :
JS

myTextSubscription$ = SomeObservable.subscribe();

HTML

{{ myTextSubscription$ | async }}

You should rather have :
JS

myTextSubscription$ = SomeObservable;

HTML

{{ myTextSubscription$ | async }}

I'd like to clarify the use of $ in your variable name :
- an observable should be suffixed with '$'
- when you use subscribe, you do not get an observable

With respect of convention :
JS

let someObservable$ = ...;

HTML

{{ someObservable$ | async }}

Remember that :
- you need to unsubscribe manually from an observable when you use subscribe to it, except from the router and http)
- when you have a .subscribe, the value returned is of type Subscription (which means you can unsubscribe from it)

So here's an overview of a cleaner structure (without using async pipe) :

@Component({
  selector: '...',
  templateUrl: '...html',
  styleUrls: ['...css']
})
export class AppComponent implements OnInit, OnDestroy {
    private myText: string;
    private myTextSubscription: Subscription;

    constructor() { }

    ngOnInit() {
        // I assume here that you declared an observable called "someObservable"

        this.myTextSubscription = someObservable$.subscribe(text => this.myText = text);
    }

    ngOnDestroy() {
        // as our observable is not coming from router or http, we need to manually
        // unsubscribe in order to avoid memory leaks

        this.myTextSubscription.unsubscribe();
    }

}

EDIT 1: With your updated example, here's how you should use it with @ngrx :

@Component({
  selector: '...',
  templateUrl: '...html',
  styleUrls: ['...css']
})
export class AppComponent implements OnInit, OnDestroy {
  private text: string;
  private textSub: Subscription;

  constructor(private store$: Store<State>) {
    this.textSub =
        store$.select('yourState')
            .subscribe((state: State) => this.text = state);
  }

  ngOnDestroy() {
    this.textSub.unsubscribe();
  }
}

If you want more info on ngrx/store or even ngrx/effects, here's what helped me a lot : This [tutorial](http://bodiddlie.github.io/ng-2-toh-with-ngrx-suite/) and once you feel comfortable enough, read the *awesome* code of this [repo](https://github.com/teropa/harmonics-explorer) (from Teropa). — maxime1992, Nov 03 '16 at 10:19

Getting updated values from Observable's subscription

2 Answers2