title: Angular mat-autocomplete - Dynamically push data to observable without changing value in input
body: <p>I have used mat-autocomplete with Angular 7.</p>
  
  <pre><code>&lt;mat-form-field floatLabel="never"&gt;
    &lt;input matInput aria-label="salesRepresentative" type="text" [placeholder]="translationObj.startTypingPlaceholder" autocomplete="off"
      [formControl]="autoCompleteControl" [matAutocomplete]="auto"&gt;
    &lt;mat-icon matSuffix class="cursor-pointer"&gt;search&lt;/mat-icon&gt;
    &lt;mat-autocomplete #auto="matAutocomplete" [displayWith]="createSalesRepString"&gt;
      &lt;mat-option *ngFor="let item of salesPickerAutoComplete$ | async;" [value]="item"&gt;
        {{item.FirstName}} {{item.LastName}} - (Username: {{item.Username}})
      &lt;/mat-option&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>And below is my component code.</p>
  
  <pre><code>this.salesPickerAutoComplete$ = this.autoCompleteControl.valueChanges.pipe(
    startWith(''),
    debounceTime(400),
    distinctUntilChanged(),
    switchMap(value =&gt; {
      if (value &amp;&amp; value.length &gt; 2) {
        return this.getSalesReps(value);
      } else {
        return of(null);
      }
    })
  );
  
  getSalesReps(value: string): Observable&lt;any[]&gt; {
    const params = new QueryDto;
    params.$filter = `substringof('${value}',FirstName) or substringof('${value}',LastName)`;
    params.$select = "UserId,FirstName,LastName,Username";
    return from(this.salesRepresentativesService.GetSalesRepresentatives(params))
      .pipe(
        map(response =&gt; response.Data),
        catchError(() =&gt; { return of(null) })
      );
  }
  </code></pre>
  
  <p>Now this works perfect with search by typing in input.</p>
  
  <p>My issue is i want list to auto-populate on-load with some items.</p>
  
  <p>I am not sure how to do this with this structure.</p>
  
  <p>Can anyone tell me how can i do that? How can i push/change some items in mat-autocomplete dynamically?</p>