title: fetch data with async pipe when view is ready
body: <p>I have a basic table component. The user is able to reload and filter the data.
  For those two actions I use Subjects.</p>
  <pre><code>private fetchFromServer$ = new Subject&lt;void&gt;();
  private filter$ = new Subject&lt;void&gt;();
  </code></pre>
  <p>The data fetch will then be switched into an observable:</p>
  <pre><code>private externalData$ = this.fetchFromServer$.pipe(
    switchMap(() =&gt; this.loadFromServer())
  );
  </code></pre>
  <p>Afterwards the observable (with the external data) will be combined with the filter-subject, like this:</p>
  <pre><code>data$ = combineLatest([this.externalData$, this.filter$]).pipe(
    switchMap(([externalData]) =&gt; this.search(externalData))
  );
  </code></pre>
  <p>here is the basic view:</p>
  <pre><code>&lt;div *ngIf=&quot;data$ | async as data&quot;&gt;
    {{data |json}}
  &lt;/div&gt;
  
  &lt;button (click)=&quot;reload()&quot;&gt;reload&lt;/button&gt;
  &lt;button (click)=&quot;filter()&quot;&gt;filter&lt;/button&gt;
  </code></pre>
  <p>But this implementation has some drawbacks yet:</p>
  <p>The table won't be displayed initially. combineLatest needs at least one emit of externalData$ and filter$. If both buttons &quot;reload&quot; and &quot;filter&quot; gets clicked, the table data will be displayed.
  But that's not the problem, because I want to display the table initially and as a result I want to call</p>
  <pre><code>fetchFromServer$.next()
  filter$.next();
  </code></pre>
  <p>on the correct position.</p>
  <p>But exactly here is my problem. Where to call those two lines?
  If I put them in the ngOnInit()-method, the data won't be shown. I guess, because the async pipe subscribes to it later.</p>
  <p>Or should the Observable be a hot observable with replaying the last emit? But I have no clue how to do that and furthermore it must be unsubscribed in the ngOnDestroy()-method?</p>
  <p>Should it be placed into the ngAfterViewInit() lifecycle hook? Then it works, but I get he famous &quot;Expression has changed after it was checked&quot; error.</p>
  <p>Here is the sample project: <a href="https://stackblitz.com/edit/angular-sl3kku" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-sl3kku</a></p>