title: How can I trigger change event in this case using Angular 4?
body: <p>I'm trying to change the content of a dropdown using the selection of another dropdown. The HTML code is as follow.</p>
  
  <pre><code>&lt;div class="form-row"&gt;
      &lt;div class="form-group col-md-6"&gt;
          &lt;label for="makesel"&gt;Make&lt;/label&gt;
          &lt;select [ngModel]="vehicle.makeId" class="form-control" id="makesel" (ngModelChange)="onChangeMake($event.target.value)"&gt;
              &lt;option&gt;Choose a make&lt;/option&gt;
              &lt;option *ngFor="let make of makes" [value]="make.id"&gt;{{ make.name }}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div *ngIf="currentMake" class="form-group col-md-6"&gt;
          &lt;label for="make"&gt;Model&lt;/label&gt;
          &lt;select [ngModel]="vehicle.modelId"  class="form-control" id="model"&gt;
              &lt;option&gt;Choose a model&lt;/option&gt;
              &lt;option *ngFor="let model of currentMake.models" value="{{ model.id }}"&gt;{{ model.name }}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the component is coded as follow:</p>
  
  <pre><code>import { Component, Inject } from '@angular/core';
  import { Http } from '@angular/http';
  
  
  @Component({
  selector: 'register-form',
  templateUrl: './registerform.component.html'
  })
  export class RegisterFormComponent{
  public makes: Make[];
  public currentMake: Make;
  public vehicle: Vehicle;
  
  constructor(http: Http, @Inject('BASE_URL') baseUrl: string){
      http.get(baseUrl + 'api/makes').subscribe(result =&gt; {
          this.makes = result.json() as Make[];
      }, error =&gt; console.error(error));
      this.vehicle = new Vehicle();
  };
  
  onChangeMake(makeId : number){
      console.log("test");
      this.currentMake = this.makes.filter(x =&gt; x.Id == makeId)[0];
  }
  }
  
  class Make {
  Id: number;
  Name: string;
  Models: Model[];
  }
  
  class Model{
  Id: number;
  Name: string;
  }
  
  class Vehicle{
  makeId : number;
  modelId : number;
  registered: boolean;
  features: number[];
  contactName: string;
  contactPhone: string;
  contactEmail: string;
  }
  </code></pre>
  
  <p>The problem is that the change event is not working in anyway I try. The current code is using ngModel and ngModelChange, but I also tried using only</p>
  
  <pre><code>change="onChangeMake($event.target.value)"
  </code></pre>
  
  <p>But I didn't have success as well. It seems like the method "onChangeMake" are not been called. Since I didn't find different ways to do this besides those two and neither seems to work, I'm asking some help. Am I missing something?</p>
  
  <p>For reference:
  Angular version: 4.2.5
  TypeScript version: 2.6.2</p>
  
  <p>Thanks in advance for the answer!</p>