title: Pre-populate checkboxes in Angular 5
body: <p>In an Angular 5 project, I have a template driven form that is pre-populated by the following array:</p>
  
  <pre class="lang-js prettyprint-override"><code>let data = [{
      Title: "My Title",
      Description: "My description",
      Value: "my_value",
      Category: "category_name",
      SelectionType: SelectionDisplayType.Checkbox,
      Selected: false
  }]
  </code></pre>
  
  <p>Here is the html: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
       &lt;li *ngFor="let item of data; let i = index;"&gt;
            &lt;label [for]="item.Title"&gt;{{ item.Title }}&lt;/label&gt;
            &lt;input ngModel #columnValuesInputs 
              [id]="item.Title" 
              [name]="item.Category" 
              [type]="((item.SelectionType === SelectionType.Checkbox) ? 'checkbox' : 'radio')" 
              [checked]="((item.Selected) ? 'checked' : '')" 
              [value]="item.Value" /&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My problem is that all of the input field "value" attributes are being populated <strong>except</strong> for the checkboxes and radio buttons, even though I'm binding the <code>item.Value</code> to the <code>[value]</code> property. So, when I output the values via <code>{{ formFilter.value | json }}</code>, the checkbox and radiobutton values are empty. </p>
  
  <p>Reactive forms are preferable, however I'm restricted to use template-driven forms.</p>
  
  <p>Please can anyone shed light on what I'm doing wrong??</p>