jqwidgets-scripts-custom/demos/Angular/splitter/defaultfunctionality/src/app/app.component.html

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

<jqxSplitter [theme]="'material'" [width]="getWidth()" [height]="600"
             [panels]="[{ size: 200, min: 100 }, { min: 200, size: 400 }]">
    <div>
        <jqxExpander [theme]="'material'" style="border: none;" #feedExpander
                     [width]="'100%'" [height]="'100%'"
                     [toggleMode]="'none'" [showArrow]="false">
            <div class="jqx-hideborder">
                Feeds
            </div>
            <div class="jqx-hideborder jqx-hidescrollbars">
                <jqxTree [theme]="'material'" #treeReference (onSelect)="onTreeSelect($event)"
                         [width]="'100%'" [height]="'100%'">
                    <ul>
                        <li item-expanded="true" id="t1">
                            <img src="https://www.jqwidgets.com/angular/images/contactsIcon.png" /><span item-title="true">News and Blogs</span>
                            <ul>
                                <li>
                                    <img src="https://www.jqwidgets.com/angular/images/favorites.png" /><span item-title="true">Favorites</span>
                                    <ul>
                                        <li>
                                            <img src="https://www.jqwidgets.com/angular/images/folder.png" /><span item-title="true">ScienceDaily</span>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <img src="https://www.jqwidgets.com/angular/images/folder.png" /><span item-title="true">Geek.com</span>
                                </li>
                                <li>
                                    <img src="https://www.jqwidgets.com/angular/images/folder.png" /><span item-title="true">CNN.com</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </jqxTree>
            </div>
        </jqxExpander>
    </div>
  <div>
    <jqxSplitter [theme]="'material'" #horizontalSplitter [width]="'100%'" [height]="'100%'" [orientation]="'horizontal'"
                 [panels]="[{ size: 400, min: 100, collapsible: false },{ min: 100, collapsible: true }]">
      <div class="feed-item-list-container" id="feedUpperPanel">
        <jqxExpander [theme]="'material'" class="jqx-hideborder" #feedListExpander
                     [width]="'100%'" [height]="'100%'"
                     [toggleMode]="'none'" [showArrow]="false">
          <div class="jqx-hideborder" id="feedHeader">
          </div>
          <div class="jqx-hideborder jqx-hidescrollbars">
            <jqxListBox [theme]="'material'" #listBoxReference class="jqx-hideborder" (onSelect)="onListBoxSelect($event)"
                        [width]="'100%'" [height]="'100%'" [source]="['1']">
            </jqxListBox>
          </div>
        </jqxExpander>
      </div>
      <div id="feedContentArea">
        <jqxExpander [theme]="'material'" class="jqx-hideborder" #feedContentExpander
                     [width]="'100%'" [height]="'100%'"
                     [toggleMode]="'none'" [showArrow]="false">
          <div class="jqx-hideborder" id="feedItemHeader">
          </div>
          <div class="jqx-hideborder jqx-hidescrollbars">
            <jqxPanel [theme]="'material'" #panelReference class="jqx-hideborder"
                      [width]="'100%'" [height]="'100%'">
              Select a news item to see it"s content
            </jqxPanel>
          </div>
        </jqxExpander>
      </div>
    </jqxSplitter>
  </div>
</jqxSplitter>