Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [disabled]="true">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
height String | Number 300

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
orientation enum:SplitterOrientation 'vertical'
enum SplitterOrientation {
     horizontal,
     vertical
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [orientation]="'horizontal'">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
panels Array<SplitterPanel> []
interface SplitterPanel {
     size?: Number | String;
     min?: Number | String;
     collapsible?: Boolean;
     collapsed?: Boolean;
}

Sets or gets the panels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
resizable Boolean true

Sets or gets the resizable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [resizable]="false">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
splitBarSize Number 5

Sets or gets the splitBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [splitBarSize]="10">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
showSplitBar Boolean true

Sets or gets the showSplitBar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [showSplitBar]="false">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
theme String ''

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]" [theme]="'energyblue'">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}
width String | Number 300

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    
}

Events

collapsed Event

This event is triggered when a panel is collapsed.

Code examples

Bind to the collapsed event of jqxSplitter. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter(onCollapsed)="Collapsed($event)"
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    Collapsed(event: any): void 
    {
        // Do Something
    }

    
}
expanded Event

This event is triggered when a panel is expanded.

Code examples

Bind to the expanded event of jqxSplitter. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter(onExpanded)="Expanded($event)"
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    Expanded(event: any): void 
    {
        // Do Something
    }

    
}
resize Event

This event is triggered when the 'resize' operation has ended.

Code examples

Bind to the resize event of jqxSplitter. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter(onResize)="Resize($event)"
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    Resize(event: any): void 
    {
        // Do Something
    }

    
}
resizeStart Event

This event is triggered when the 'resizeStart' operation has started.

Code examples

Bind to the resizeStart event of jqxSplitter. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter(onResizeStart)="ResizeStart($event)"
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent {
    ResizeStart(event: any): void 
    {
        // Do Something
    }

    
}

Methods

NameReturn TypeArguments
collapse Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.collapse();
    }

    
}
destroy Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.destroy();
    }

    
}
disable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.disable();
    }

    
}
enable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.enable();
    }

    
}
expand Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.expand();
    }

    
}
render Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.render();
    }

    
}
refresh Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSplitter #mySplitter
            [width]="850" [height]="480" [panels]="[{ size: 300 }]">
            <div class="splitter-panel">
                Panel 1
            </div>
            <div class="splitter-panel">
                Panel 2
            </div>
        </jqxSplitter>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySplitter') mySplitter: jqxSplitterComponent; 
 

    ngAfterViewInit(): void 
    {
        this.mySplitter.refresh();
    }

    
}