jqwidgets-scripts-custom/demos/Angular/tree/events/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

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

    <jqxTree [theme]="'material'" #myTree (onSelect)="myTreeOnSelect($event)"
        (onExpand)="myTreeOnExpand($event)" (onCollapse)="myTreeOnCollapse($event)"
        [width]="250" [source]="source">
        <ul>
          <li item-selected='true'>Home</li>
          <li item-expanded='true'>
            Solutions
            <ul>
              <li>Education</li>
              <li>Financial services</li>
              <li>Government</li>
              <li>Manufacturing</li>
              <li>
                Solutions
                <ul>
                  <li>eLearning</li>
                  <li>Mobile</li>
                  <li>RIA</li>
                  <li>Training</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            Products
            <ul>
              <li>PC products</li>
              <li>Mobile products</li>
              <li>All products</li>
            </ul>
          </li>
        </ul>
    </jqxTree>

</div>

<div style="margin-left: 20px; float: left; border: none !important">
    <div>
        <span>Events:</span>

        <jqxPanel [theme]="'material'" #myPanel [width]="250" [height]="200"></jqxPanel>

    </div>
</div>