jqwidgets-scripts-custom/demos/Angular/splitter/nestedsplitters/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'" #mainSplitter
             [width]="getWidth()" [height]="850" [orientation]="'horizontal'"
             [panels]="[{ size: '50%' }, { size: '50%' }]">
  <div>
    <jqxSplitter [theme]="'material'" #firstNested class="jqx-splitter-nested"
                 [width]="'100%'" [height]="'100%'" [orientation]="'vertical'"
                 [panels]="[{ size: 300, collapsible: false }]">
      <div>
        <jqxSplitter [theme]="'material'" #secondNested class="jqx-splitter-nested"
                     [width]="'100%'" [height]="'100%'" [orientation]="'horizontal'"
                     [panels]="[{ size: 150 }]">
          <div>
            <span>Panel 1</span>
          </div>
          <div>
            <span>Panel 2</span>
          </div>
        </jqxSplitter>
      </div>
      <div>
        <span>Panel 3</span>
      </div>
    </jqxSplitter>
  </div>
  <div>
    <jqxSplitter [theme]="'material'" #thirdNested class="jqx-splitter-nested"
                     [width]="'100%'" [height]="'100%'" [orientation]="'horizontal'"
                     [panels]="[{ size: 150, collapsible: false }]">
      <div>
        <span>Panel 4</span>
      </div>
      <div>
        <span>Panel 5</span>
      </div>
    </jqxSplitter>
  </div>
</jqxSplitter>