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

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

<div id="container" style="float: left;">
  <jqxButton [theme]="'material'" #orientationButton style='margin-top: 5px;'
             (onClick)="orientationButtonClick()" 
             [width]="90">Orientation</jqxButton>

  <jqxButton [theme]="'material'" #expandFirstButton style='margin-top: 5px;'
             (onClick)="expandFirstButtonClick()"
             [width]="90">Expand first</jqxButton>

  <jqxButton [theme]="'material'" #expandLastButton style='margin-top: 5px;'
             (onClick)="expandLastButtonClick()"
             [width]="90">Expand last</jqxButton>

  <jqxButton [theme]="'material'" #collapseFirstButton style='margin-top: 5px;'
             (onClick)="collapseFirstButtonClick()"
             [width]="97">Collapse first</jqxButton>

  <jqxButton [theme]="'material'" #collapseLastButton style='margin-top: 5px;'
             (onClick)="collapseLastButtonClick()"
             [width]="97">Collapse last</jqxButton>

  <jqxButton [theme]="'material'" #enableButton style='margin-top: 5px;'
             (onClick)="enableButtonClick()"
             [width]="90">Enable</jqxButton>

  <jqxButton [theme]="'material'" #disableButton style='margin-top: 5px;'
             (onClick)="disableButtonClick()"
             [width]="90">Disable</jqxButton>
  <br /><br />

  <jqxSplitter [theme]="'material'" #jqxSplitter [height]="600" [width]="getWidth()" [panels]="panels">
    <div style="background-color:#F5FFF2;"></div>
    <div style="background-color:#EBF1FF;"></div>
  </jqxSplitter>
</div>