Angular UI Components Documentation

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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 {
    
}

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}
							
						

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();
    }

    
}