An angular splitter can pull a responsive layout, and also works as a notes layout on Mac.

how to divide the page into two parts horizontally vertically, split screen slider, angular split pane example, angular material split pane, split screen in angular, angular split screen resizable

Unknown Resizable Modern Split View In JavaScript | Split.js

How to make use of it:

Installation:

git clone https://github.com/guguji5/angular-splitter.git
cd angular-splitter
npm install
ng serve --open

simple demo:

<tam-splitter splitterBarWidth=3 [direction]="horizontal" (sizeChange)="sizeChange($event)">
    <tam-splitter-panel [size]="20" [max]="30" [min]="10"
        [visible]=true (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel  [size]="30" [max]="50" [min]="20">
        Side List Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="50" [max]="70" [min]="20">
        Preview Panel
    </tam-splitter-panel>
</tam-splitter>

nested demo:

<tam-splitter splitterBarWidth=3>
    <tam-splitter-panel [size]="20" [max]="30" [min]="10" (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="80">
        <tam-splitter splitterBarWidth=3 [direction]="'vertical'">
            <tam-splitter-panel [size]="30" [max]="40" [min]="20">
                Side List Panel
            </tam-splitter-panel>

            <tam-splitter-panel [size]="70" [max]="80" [min]="60">
                Preview Panel
            </tam-splitter-panel>
        </tam-splitter>
    </tam-splitter-panel>
</tam-splitter>

Responsive Split Layout, angular splitter Plugin/Github, split screen angular template, responsive split screen with angular, angular split demo

See Demo And Download

Official Website(guguji5): Click Here

This superior jQuery/javascript plugin is developed by guguji5. For extra Advanced usage, please go to the official website.