title: Angular 4 select not updating value in ngIf
body: <p>I have an ngIf that uses a value from a select to display or not another select, but when i change the value in first select, the ngIf still use the old value. The code I'm using:</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-html lang-html prettyprint-override"><code>&lt;div class="form-group" &gt;
   &lt;label&gt;First select&lt;/label&gt;
   &lt;select name="status" class="form-control"[(ngModel)]="status.status"&gt;
    &lt;option *ngFor="let s of listStatus" [selected]="s.id === status.status" [value]="s.id"&gt;{{s.text}}&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group" *ngIf="status.status === 1"&gt;
   &lt;label&gt;Second select&lt;/label&gt;
   &lt;select name="blockLevel" class="form-control" [(ngModel)]="status.blockLevel"&gt;
    &lt;option *ngFor="let s of listBlockedLevel" [selected]="s.id === status.blockLevel" [value]="s.id"&gt;{{s.text}}&lt;/option&gt;
   &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the component.ts the value is correctly updated. I tried to show the value using {{status.status}} and the value doesn't change.</p>
  
  <hr>
  
  <p><strong>Solution</strong></p>
  
  <p>I resolve my problem using ChangeDetectorRef. In the first select i used a method to update the value</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-html lang-html prettyprint-override"><code>&lt;select name="status" class="form-control" [ngModel]="status.status" (ngModelChange)="setStatus($event)"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in ts component i used this</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>public setStatus(event: any) {
      this.status.status = event;
      this.ref.detectChanges();
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>in component constructor i used this to import ChangeDetectorRef</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>private ref: ChangeDetectorRef</code></pre>
  </div>
  </div>
  </p>