jqwidgets-framework/demos/Angular/src/tree/checkboxes/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxTree #myTree style="margin-left: 20px; float: left"
    [width]="300" [height]="450" [hasThreeStates]="true" [checkboxes]="true">
  <ul>
    <li id='home'>Home</li>
    <li id='solutions'>
      Solutions
      <ul>
        <li>Education</li>
        <li>Financial services</li>
        <li>Government</li>
        <li id='manufacturing'>Manufacturing</li>
        <li>
          Solutions
          <ul>
            <li>Consumer photo and video</li>
            <li>Mobile</li>
            <li>Rich Internet applications</li>
            <li>Technical communication</li>
            <li>Training and eLearning</li>
            <li>Web conferencing</li>
          </ul>
        </li>
        <li>All industries and solutions</li>
      </ul>
    </li>
    <li>
      Products
      <ul>
        <li>PC products</li>
        <li>Mobile products</li>
        <li>All products</li>
      </ul>
    </li>
    <li>
      Support
      <ul>
        <li>Support home</li>
        <li>Customer Service</li>
        <li>Knowledge base</li>
        <li>Books</li>
        <li>Training and certification</li>
        <li>Support programs</li>
        <li>Forums</li>
        <li>Documentation</li>
        <li>Updates</li>
      </ul>
    </li>
    <li>
      Communities
      <ul>
        <li>Designers</li>
        <li>Developers</li>
        <li>Educators and students</li>
        <li>Partners</li>
        <li>
          By resource
          <ul>
            <li>Labs</li>
            <li>TV</li>
            <li>Forums</li>
            <li>Exchange</li>
            <li>Blogs</li>
            <li>Experience Design</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      Company
      <ul>
        <li>About Us</li>
        <li>Press</li>
        <li>Investor Relations</li>
        <li>Corporate Affairs</li>
        <li>Careers</li>
        <li>Showcase</li>
        <li>Events</li>
        <li>Contact Us</li>
        <li>Become an affiliate</li>
      </ul>
    </li>
  </ul>
</jqxTree>

<div style="margin-left: 60px; float: left">
  <div style="margin-top: 10px">

    <jqxCheckBox (onChange)="myCheckBoxOnChange($event)" [checked]="true">Three Check States</jqxCheckBox>

  </div>
</div>