title: Set the default value of checkbox angular 2
body: <p>By default the <code>ngModel</code> for <code>checkboxes</code> is set to true and false on the checking and unchecking action.</p>
  
  <p>I want the value to be set to different values and not true and false. I have tried using <code>[ngValue]</code> and <code>[value]</code> but nothing worked. How to do this?</p>
  
  <p>The actual scenario is: </p>
  
  <ol>
  <li>I have an array of categories which can be selected.</li>
  <li>There is also an option to reset all the selections made. </li>
  </ol>
  
  <p>My markup and code: </p>
  
  <pre><code>&lt;template ngFor let-item [ngForOf]="categories" let-i="index"&gt;
      &lt;input id="{{item}}" type="checkbox" name="{{item}}" [(ngModel)]="categoriesSelected[i]"  [ngValue]="item"&gt;
      &lt;label htmlFor="{{item}}"&gt;{{item}}&lt;/label&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>What I was hoping to achieve from this was that in the <code>categoriesSelected</code> array the item names would populate and unpopulate as the checkbox is selected and unselected.</p>
  
  <p>But this does not work as <code>ngValue</code> is not recognised. </p>
  
  <p>I had to do the following:</p>
  
  <pre><code>&lt;template ngFor let-item [ngForOf]="categories" let-i="index"&gt;
      &lt;input id="{{item}}" type="checkbox" name="{{item}}" [ngModel]="categoriesSelected[i]"  (change)="checkChange(i, item, 'category')" &gt;
      &lt;label htmlFor="{{item}}"&gt;{{item}}&lt;/label&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Where in the <code>checkChange</code> function, I set the item value to the <code>ith</code> index of the <code>categoriesSelected</code> array which I later output only to the <code>ng-model</code>.</p>