"async" pipe not rendering the stream updates
<p>Trying to render the window size on window resize through a stream in an angular 2 component utilizing an <code>async</code> pipe:</p>

<p><code>&lt;h2&gt;Size: {{size$ | async | json}}&lt;/h2&gt;</code></p>

<pre><code>const windowSize$ = new BehaviorSubject(getWindowSize());
Observable.fromEvent(window, 'resize')
  .map(getWindowSize)
  .subscribe(windowSize$);

function getWindowSize() {
  return {
    height: window.innerHeight,
    width: window.innerWidth
  };
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Size: {{size$ | async | json}}&lt;/h2&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  size$ = windowSize$.do(o =&gt; console.log('size:', o));
  constructor() {  }
}
</code></pre>

<p>But the component only renders the initial state and ignores the stream updates.
If you open the console, on window resize, you'll see the updates from that same stream.</p>

<p>Can't understand what i am missing here.</p>

<p>Here's a <a href="http://plnkr.co/edit/pg4Hkh0xfDRPvtfLwvZN?p=preview" rel="noreferrer">plunker</a></p>