angular2 rxjs shared subscribe not firing

Angular2 2.0.0-beta.15, Rxjs 5.0.0-beta.2

I have two simple rxjs observables, one shared, one not (.share() called on it)

I have an angular2 component which subscribes to both observables and also displays the values in its template, which also subscribes to the observables with async pipe.

I click a button to set .next() on both observables with some garbage.

The template updates and shows the latest value of each.
The subscription function in the component does NOT fire for the non-shared observable. Why?

plunkr:
https://plnkr.co/edit/IIWvnTT1zLit1eUNknkk?p=preview

@Component({
    selector: 'my-app',
    template: `
        <div>
            <div>obs1 value: {{ observable1 | async }}</div>
            <div>obs2 value: {{ observable2 | async }}</div>
            <button (click)="randomizeIt()">randomize it</button>

            <br>
            <h3>Question 1</h3>
            Why is obs1's initial value (from startWith) not displayed?

            <h3>Question 2</h3>
            Why does our subscription to obs2 never fire on new values?<br>
            check console.log to see what i mean.
        </div>`,
})
export class App {

    public observable1:Observable<string>;
    public observer1:any;
    public observable2:Observable<string>;
    public observer2:any;

    constructor() {
        this.observable1 = Observable.create(observer => {
            this.observer1 = observer;
        }).startWith("initial obs 1 value").share();

        this.observable1.subscribe((val) => {
            console.log('YOU WILL SEE THIS:', val);
        })

        this.observable2 = Observable.create(observer => {
            this.observer2 = observer;
        }).startWith("initial obs 2 value"); // no share!

        this.observable2.subscribe((val) => {
            console.log('WHY DOES THIS NEVER FIRE ON NEW VALUES?:', val);
        })

    }

    public randomizeIt() {
        let r = Math.random();
        console.log('set both obs to: ', r);
        this.observer1.next(r);
        this.observer2.next(r);
    }   

}

Thanks in advance!

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Q1. Why is obs1’s initial value (from startWith) not displayed? From the share() docs: Returns an observable sequence that shares a single subscription to the underlying sequence. Which means, in your case, {{ observable1 | async }} and this.observable1.subscribe(....) are sharing the same subscription and when you subscribed to observable1 in the constructor, you already started the sequence. When the view initialized, the subscription to observable1 was already started and the first value emitted. So async will call subscribe(), but will not get the first emit of the sequence. So, if you move the subscription to inside ngAfterViewInit(), the initial… Read more »