AsyncPipe doesn't work with RxJs Subject

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior AsyncPipe works properly with BehaviorSubject, but it don’t work with Rx Subject. More info: http://stackoverflow.com/questions/39902413/angular-2-0-1-asyncpipe-doesnt-work-with-rx-subject

Expected behavior Works with Subject

Minimal reproduction of the problem with instructions

export class AppComponent {
  foo = new Subject<Array<number>>();

  constructor(){
     setTimeout(() => {
          this.foo.next([1,2,3]);
     }, 3000);
  }

  getFoo(){
     return this.foo.asObservable();
  }
}

<span *ngFor="let e of foo.asObservable() | async">{{e}}</span>

What is the motivation / use case for changing the behavior? I use Subject because I somethines need subscribe to the service when data is loaded an make decisions. BehaviorSubject forces me to initialize the object with an empty data.

Please tell us about your environment: Not required

• Angular version: 2.0.X Angular 2.0.1
• Browser: All
• Language: all
• Node (for AoT issues):
  4.4.4

[wardbell]

Closing because we won’t document such a narrow use case in the general Angular docs. This would be better as a Stack Overflow Q&A

[robwormald]

The problem here is calling a method from your template - this means every time change detection runs, you’re calling your getFoo() function, which returns a new instance of the observable, which resets the async pipe.

As @DzmitryShylovich’s example shows, its generally preferable to bind to properties on your component:

export class AppComponent {
  foo = new Subject<number[]>();
  foo$ = Observable<number[]>
  constructor(){
    this.foo$ = this.foo.asObservable();
     setTimeout(() => {
          this.foo.next([1,2,3]);
     }, 3000);
  }
}

<span *ngFor="let e of foo$ | async">{{e}}</span>