title: Angular Custom Form Control - Change Detection on mat-select with selectionChange event
body: <p>I have custom form control with mat-select inside</p>
  
  <p>I am trying to listen on change event in the parent component</p>
  
  <p>But my onTouchedCallback do not work for some reason</p>
  
  <p>What did I do wrong???</p>
  
  <p>Thanks in advance ❤</p>
  
  <p>This is my Custom form control:</p>
  
  <pre><code>import { Component, OnInit, forwardRef } from '@angular/core';
  import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
  
  const noop = () =&gt; { };
  
  export interface Food {
    value: string;
    viewValue: string;
  }
  
  @Component({
    selector: 'app-custom-select-form-control',
    templateUrl: './custom-select-form-control.component.html',
    styleUrls: ['./custom-select-form-control.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        multi: true,
        useExisting: forwardRef(() =&gt; CustomSelectFormControlComponent),
      },
    ]
  })
  export class CustomSelectFormControlComponent implements OnInit, ControlValueAccessor {
    foods: Food[] = [
      { value: 'steak-0', viewValue: 'Steak' },
      { value: 'pizza-1', viewValue: 'Pizza' },
      { value: 'tacos-2', viewValue: 'Tacos' }
    ];
    constructor() { }
  
    ngOnInit() {
    }
  
  
    selectedOption: String;
    private onTouchedCallback: () =&gt; void = noop;
    private onChangeCallback: (_: any) =&gt; void = noop;
    propagateChange = (_: any) =&gt; { };
  
  
    writeValue(val: string): void {
      this.selectedOption = val;
    }
    registerOnChange(fn: any): void {
      this.onChangeCallback = fn;
    }
    registerOnTouched(fn: any): void {
      this.onTouchedCallback = fn;
    }
  
    get value(): String {
      return this.selectedOption;
    }
  
    set value(v: String) {
      if (v != undefined &amp;&amp; v != null &amp;&amp; v !== this.selectedOption) {
        this.selectedOption = v;
  
      }
    }
  
  
    selectionChange(e:any)
    {
      this.value = e.value;
      this.onChangeCallback(this.value);
    }
  
  }
  </code></pre>
  
  <p>This is my html file:</p>
  
  <pre><code>  &lt;mat-form-field&gt;
    &lt;mat-select placeholder="Favorite food"  (selectionChange)='selectionChange($event)'&gt;
      &lt;mat-option *ngFor="let food of foods" [value]="food.value"&gt;
        {{food.viewValue}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>This is My Parent Component Html:</p>
  
  <pre><code>&lt;app-custom-select-form-control 
       (change)='customControlChangeDetection($event)'&gt;
  &lt;/app-custom-select-form-control&gt;
  </code></pre>
  
  <p>The debugger stopped in <em>selectionChange</em> but to not reach <em>selectionChange</em> in parent controller</p>
  
  <p>If I replcae the mat-select with simple input / mat-input - everything work well.</p>
  
  <p>I tried also with mat-date-picker and also there the change detection is not working well</p>