Value change in observable subscription not triggered in async pipe

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

A change of a value (observable ‘A’) that is triggered by a subscribed observable (observable ‘B’) in a smart component does not reflect to the dumb component that is fed by an async pipe of observable ‘A’. We use a store to save all of our app’s states (see plunkr).

Expected behavior

The change can be seen in the dumb component as soon as one changes the value.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/l61VBFuybdCyyoNZIKro?p=preview

Enter some value (e.g. ‘test’) in the input field and click the button. This publishes the value in the observable ‘value’. In the app.ts one subscribes to that observable, so we get that value there. In the body of that subscribe the entered value is published in another observable ‘name’. The dumb component is fed by an async pipe which subscribes on the observable ‘name’. ‘test’ can not be seen in the dumb component now.

If you hit the button a second time, you can see the value in the dumb component. You can also delay the new value with a setTimeout to get it working.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.0


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[trotyl]

@pschmoek It’s the intrinsic evil of synchronous bi-directional event stream, not specific to Angular part. I won’t suggest depending on this kind of vulnerable code.

_{Angular’s view rendering happens after OnInit (consider AfterViewChecked), the order for combing OnInit and async pipe is expected.}

[trotyl]

You can see that your observable is emitting undefined value if you add a console.log, it’s the problem of your own data source:

name$ = this.store.state$.pipe(
  tap(n => console.log(`tap1: ${JSON.stringify(n)}`)),
  map(s => s.name),
  tap(n => console.log(`tap2: ${n}`)),
  distinctUntilChanged(),
  tap(n => console.log(`tap3: ${n}`)),
);