title: One-way binding a checkbox with [ngModel] does not work in Angular 6
body: <p>We are developing an app with Angular 6 and NgRX (Redux-Pattern). I have a checkbox in my template <strong>discovery.component.html</strong>:</p>
  
  <pre><code>&lt;label&gt;
    &lt;input type="checkbox" name="wrongSpelling"
      [ngModel]="state.wrongSpelling" (click)="toggleWrongSpelling($event)" /&gt;
    Wrong Spelling
  &lt;/label&gt;
  </code></pre>
  
  <p>According to Redux-pattern, the dataflow should look like this:</p>
  
  <ol>
  <li><p>User clicks on the checkbox. The checkbox is <em>not</em> toggled but an update action is dispatched. Also the <code>state</code> is <em>not updated</em> (<strong>One-way binding</strong>)</p></li>
  <li><p><code>render()</code>  is called with the new state and with the updated entity. The updated entity is assigned to the component.</p></li>
  <li><p>The checkbox's state should update depending on the updated entity.</p></li>
  </ol>
  
  <p>The relevant code of <strong>discovery.component.ts</strong> is given below:</p>
  
  <pre><code>public state;
  
  render(state) {
    if (state.discovery) {
      this.state = state.discovery;
    }
  }    
  
  toggleWrongSpelling(event) {
    event.preventDefault();
    this.discoveryAction.update({
      wrongSpelling: !this.state.wrongSpelling // it's safe that state exists here
    });
  }
  </code></pre>
  
  <p>However, <strong>the checkbox does not get checked on click</strong>.</p>
  
  <p>Things I'v tried (without success):</p>
  
  <ul>
  <li>Debugging <code>render()</code>: <code>this.state.wrongSpelling</code> is indeed toggled every time I click on the checkbox</li>
  <li>create a member in my DiscoveryComponent <code>wrongSpelling</code> which is toggled in <code>toggleWrongSpelling()</code> and read in the template (instead of the state) (I thought about changeDetection strategies that might be the problem here)</li>
  <li>used <code>[value]</code>, <code>[checked]</code> and (for testing) <code>[(ngModel)]</code> instead of <code>[ngModel]</code> in the template</li>
  <li>replaced <code>Wrong Spelling</code> with <code>{{ state.wrongSpelling }}</code> to see if there is a timing problem</li>
  <li>used the safe-navigation-operator: <code>[ngModel]="state?.wrongSpelling"</code></li>
  </ul>
  
  <p>so the problem seems to be in the template. <strong>What could be wrong here?</strong></p>