title: How to make checkbox tri-state?
body: <p><strong>Technology Used :</strong>  Angular 5</p>
  
  <p><strong>Scenario :</strong> </p>
  
  <ul>
  <li>I have a tree view with a checkbox. Whenever data is loaded onto the page, based on the property I am making checkbox checked or unchecked.</li>
  </ul>
  
  <p><strong>Todo :</strong>  </p>
  
  <ul>
  <li>Whenever property is false I want to add a cross mark in checkbox by default.</li>
  </ul>
  
  <p>Below is my code which will render tree view with the checkbox.</p>
  
  <pre><code>&lt;tree-root #tree [options]="options" [nodes]="nodes"&gt;
      &lt;ng-template #treeNodeTemplate let-node="node" let-index="index"&gt;
          &lt;input (change)="check(node, !node.data.checked)"
                 type="checkbox"
                 [indeterminate]="node.data.indeterminate"
                 [checked]="node.data.checked" class="css-checkbox"&gt;
          {{ node.data.name }}
  &lt;/ng-template&gt;
  &lt;/tree-root&gt;  
  </code></pre>
  
  <p>In the above code snippet whenever <strong><code>node.data.checked</code></strong> is true then I am making checkbox checked by default. Whenever <strong><code>node.data.checked</code></strong> comes false I want to display cross mark in the checkbox.</p>
  
  <p>I have searched over the net but did not get any use full links.</p>
  
  <p>Can someone help me to make this work?</p>
  
  <p>Any help would be greatly appreciated. Thank you.  </p>