title: Angular form change event with material components
body: <p>I have a form that contains <strong>inputs</strong> and <strong>material components</strong> (like <code>mat-select</code> or <code>mat-checkbox</code>).</p>
  
  <p>Each time a modification is made by the user, I want to persist them to the DB. So I did something like <code>&lt;form (change)="save()"&gt;</code>.</p>
  
  <p>This is working flawlessly for the native inputs, but it doesn't fire when the user changes a material component value.</p>
  
  <p>I'd rather avoid solutions like using <code>&lt;mat-select (selectionChange)="save()"&gt;</code> on every component, as I could easily forget to add it when I'll have to update my form.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This is a template driven form. My template is as follow:</p>
  
  <pre><code>&lt;form (change)="save()"&gt;
      &lt;!-- Will trigger save --&gt;
      &lt;mat-form-field class="col"&gt;
          &lt;input matInput placeholder="Name" name="name" [(ngModel)]="item.name"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;!-- Will NOT trigger save --&gt;
      &lt;mat-form-field class="col"&gt;
          &lt;mat-select placeholder="Category" name="category [(ngModel)]="item.category.id"&gt;
              &lt;mat-option *ngFor="let category of categories" [value]="category.id"&gt;{{category.name}}&lt;/mat-option&gt;
          &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  
      &lt;!-- ... --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The component code has nothing particular, only the model variable (<code>item: Item;</code>).</p>