title: Angular 5 subscribe on value change
body: <p>In my angular 5 application I have some autocomplete, and I want to populate the suggestions only when the value of the input changes.
  At the moment when someone writes in the input correctly invoke my service to retrieve the first 20 matching results but this service has to be invoked also before the first value change so If I focus the field I can see the suggestions instead of none.</p>
  
  <p>So how can I make my call first time before the value changes?</p>
  
  <p>This is my method:</p>
  
  <pre><code>matchingCustomers = new BehaviorSubject&lt;Customer[]&gt;([]);
  
  ngOnInit() {
   this.firstFormGroup.controls['customer'].valueChanges.subscribe(val =&gt; {
  
        this.ticketService.getCustomers(val).subscribe(customers =&gt; {
          this.matchingCustomers.next(customers);
        });
      });
  }
  </code></pre>
  
  <p>And this is the autocomplete:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput appEnforcedInputs [formControl]="firstFormGroup.get('customer')" formControlName="customer" #customer placeholder="{{ 'ticketbundle.detail.labels.customer' | translate }}"
                                                  [matAutocomplete]="customerAuto" name="customer"&gt;
       &lt;mat-icon matSuffix&gt;account_circle&lt;/mat-icon&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-autocomplete #customerAuto="matAutocomplete" [displayWith]="displayFn"&gt;
              &lt;mat-option class="mat-option-customers big-height" *ngFor="let customer of matchingCustomers | async" [value]="customer"&gt;
  
                  &lt;div class="row"&gt;
                      &lt;span&gt;
                       &lt;i class="material-icons"&gt;account_circle&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;span&gt;
                        &lt;h3&gt;{{customer.name}}&lt;/h3&gt;
                          &lt;p&gt;
                          &lt;span class="foreground-color"&gt;{{customer.city}}
                          &lt;/span&gt;&amp;nbsp; - {{customer.address}}
                          &lt;/p&gt;
                          &lt;p&gt;
                              &lt;img src="assets/img/flags16/{{customer.countryAlpha2Code | lowercase}}.png" /&gt;{{customer.countryName}}
                          &lt;/p&gt;
                          &lt;p&gt;
                          &lt;span class="darkblue"&gt;{{customer.username}}&lt;/span&gt; -
                              &lt;i class="material-icons custom-icons"&gt;account_balance&lt;/i&gt;{{'customer.detail.labels.balance' | translate}} : &amp;nbsp;
                              &lt;span *ngIf="customer.balance != null" [style.color]="customer.balance &lt; 0 ? 'red' : 'green'"&gt;
                                                                  {{customer.balance | currency:'EUR':'symbol'}} &lt;/span&gt;
                              &lt;span *ngIf="customer.balance == null"&gt; -- &lt;/span&gt;
                              &lt;/p&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
  
  
                          &lt;/mat-option&gt;
                      &lt;/mat-autocomplete&gt;
  </code></pre>