jqwidgets-framework/demos/Angular/src/tree/settings/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">
    <ul>
      <li id="home">Home</li>
      <li id="solutions">
        Solutions
        <ul>
          <li>Education</li>
          <li>Financial services</li>
          <li>Government</li>
          <li>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">
    <jqxButton (onClick)="AddOnClick()" [width]="125" [height]="25">Add</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="AddAfterOnClick()" [width]="125" [height]="25">Add After</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="AddBeforeOnClick()" [width]="125" [height]="25">Add Before</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="UpdateOnClick()" [width]="125" [height]="25">Update</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="RemoveOnClick()" [width]="125" [height]="25">Remove</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="DisableOnClick()" [width]="125" [height]="25">Disable</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="ExpandOnClick()" [width]="125" [height]="25">Expand</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="CollapseOnClick()" [width]="125" [height]="25">Collapse</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="ExpandAllOnClick()" [width]="125" [height]="25">Expand All</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="CollapseAllOnClick()" [width]="125" [height]="25">Collapse All</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="EnableAllOnClick()" [width]="125" [height]="25">Enable All</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="NextOnClick()" [width]="125" [height]="25">Next Item</jqxButton>
  </div>
  <div style="margin-top: 10px">
    <jqxButton (onClick)="PreviousOnClick()" [width]="125" [height]="25">Previous Item</jqxButton>
  </div>
</div>