title: Observable with initial value
body: <p>Using observable, I want to filter and display a list. The input <code>event</code> is fired only when the user starts typing. Therefore the list is not displayed at the first place. How can I assign a default value to the observable <code>this.filterLocation$</code> until the <code>inputEvent</code> starts to be triggered? </p>
  
  <p>template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-template ngFor let-location [ngForOf]="filterLocation$ | async"&gt;
          &lt;a mat-list-item href="#"&gt;{{location}}&lt;/a&gt;
        &lt;/ng-template&gt;
  </code></pre>
  
  <p>component
  </p>
  
  <pre><code>ngAfterViewInit() {
  const searchBox = document.querySelector('#search-input');
  this.filterLocation$ = fromEvent(searchBox, 'input')
    .pipe(
      map((e: any) =&gt; {
        const value = e.target.value;
          return value ? this.locations
            .filter(l =&gt; l.toLowerCase().includes(value.toLowerCase()))
            : this.locations;
        }),
        startWith(this.locations)
    )
   }
  }
  </code></pre>
  
  <p>Using <code>startWith</code> makes the list to be displayed initially. But the following error is thrown:</p>
  
  <blockquote>
    <p>Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: null'. Current value: 'ngForOf: name1,name2'.</p>
  </blockquote>
  
  <p><a href="https://stackblitz.com/edit/angular-wur3y3" rel="noreferrer">live code</a></p>