title: Formatting an Angular Material Autocomplete Input
body: <p>My task is to build an input with the Angular Material Autocomplete and numeric formatting. For the Project I've build a numeric formatter, that is used on many input fields.</p>
  
  <p>The problem: Angular does not allow multiple ControlValueAccessor for one control.
  So I must decide between the format-CVA and the autocomplete-CVA.</p>
  
  <p>I tried a workaround with an additional hidden autocomplete input. onFocus/onBlur opens/closes the autocomplete box of the hidden input and the change event of the autocomplete writes the selected value to the visible input. But the Angular Material Autocomplete does not fire the changeevent, when it has been opened by function call.</p>
  
  <p>Can I catch the changed event from a manually opened Autocomplete?
  Do you know any better Workarounds for my problem?</p>
  
  <p>Here my current attempt:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
  import { FormBuilderService } from '../../../services/form-builder.service';
  import { FormMetadataService } from '../../../services/form-metadata.service';
  import { CustomAutocompleteComponent } from './custom-autocomplete.component';
  import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material';
  
  @Component({
    selector: 'app-custom-autocomplete-numeric',
    templateUrl: './custom-autocomplete-numeric.component.html'
  })
  export class CustomAutocompleteNumericComponent extends CustomAutocompleteComponent implements OnInit {
    @ViewChild('faketrigger', { read: MatAutocompleteTrigger }) faketrigger: MatAutocompleteTrigger;
    @ViewChild('faketrigger') faketextbox: ElementRef;
    @ViewChild('auto', { read: MatAutocomplete }) auto: MatAutocomplete;
    @ViewChild('textbox') textbox: ElementRef;
  
    constructor(
      formDataService: FormBuilderService,
      metadataService: FormMetadataService) {
      super(formDataService, metadataService);
    }
  
    ngOnInit() {
      super.ngOnInit();
      this.auto.optionSelected.subscribe(_ =&gt; this.setSelectedValue(_));
    }
  
    private setSelectedValue(event: MatAutocompleteSelectedEvent): void {
      this.textbox.nativeElement.value = event.option.value;
    }
  
    public openAutocomplete(): void {
      setTimeout(() =&gt; {
      this.faketrigger.openPanel();
      }, 200);
    }
    public closeAutocomplete(): void {
      this.faketrigger.closePanel();
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;mat-form-field&gt;
      &lt;span *ngIf="prefix" matPrefix&gt;{{prefix}} &amp;nbsp;&lt;/span&gt;
      &lt;input class="numeric" [placeholder]="customPlaceholder" [formControl]="customFormControl" matInput #textbox
        [appHelp]="name" [appFormat]="customFormControl" (focus)="openAutocomplete()" (blur)="closeAutocomplete()"&gt;
      &lt;span *ngIf="suffix" matSuffix&gt;&amp;nbsp;{{suffix}}&lt;/span&gt;
    &lt;/mat-form-field&gt;
    
    &lt;mat-form-field&gt;
      &lt;input [matAutocomplete]="auto" #faketrigger style="display: block" matInput&gt;
      &lt;mat-autocomplete #auto&gt;
        &lt;mat-option *ngFor="let o of options" [value]="o.Value" [attr.image]="o.Key"&gt;{{o.Value}}&lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>