SplitterModel API in Angular Splitter API component

Interface for a class Splitter

Properties

beforeCollapse

EmitType<BeforeExpandEventArgs>

Triggers when before panes get collapsed.

beforeExpand

EmitType<BeforeExpandEventArgs>

Triggers when before panes get expanded.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

collapsed

EmitType<ExpandedEventArgs>

Triggers when after panes get collapsed.

created

EmitType<Object>

Triggers after creating the splitter component with its panes.

expanded

EmitType<ExpandedEventArgs>

Triggers when after panes get expanded.

resizeStart

EmitType<ResizeEventArgs>

Triggers when the split pane is started to resize.

resizeStop

EmitType<ResizingEventArgs>

Triggers when the resizing of split pane is stopped.

resizing

EmitType<ResizingEventArgs>

Triggers when a split pane is being resized.

cssClass

string

Specifies the CSS class names that defines specific user-defined styles and themes to be appended on the root element of the Splitter. It is used to customize the Splitter control. One or more custom CSS classes can be specified to the Splitter.

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence

boolean

Enables or disables the persisting component’s state between page reloads.

enableReversePanes

boolean

Specifies the value whether splitter panes are reordered or not .

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

Specifies boolean value that indicates whether the component is enabled or disabled. The Splitter component does not allow to interact when this property is disabled.

height

string

Specifies the height of the Splitter component that accepts both string and number values.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

orientation

Orientation

Specifies a value that indicates whether to align the split panes horizontally or vertically.

• Set the orientation property as “Horizontal” to create a horizontal splitter that aligns the panes left-to-right.
• Set the orientation property as “Vertical” to create a vertical splitter that aligns the panes top-to-bottom.

import { Component} from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<ejs-splitter orientation="Vertical" height="100px"><e-panes><e-pane><ng-template #content><div class="content">Left pane</div></ng-template></e-pane><e-pane ><ng-template #content><div class="content">Right pane</div></ng-template></e-pane></e-panes></ejs-splitter>'
})
export class AppComponent {
}

paneSettings

PanePropertiesModel[]

Configures the individual pane behaviors such as content, size, resizable, minimum, maximum validation, collapsible and collapsed.

import { Component} from '@angular/core';
import { PanePropertiesModel } from '@syncfusion/ej2-angular-layouts';

@Component({
    selector: 'app-root',
    template: '<ejs-splitter [paneSettings]="paneSettings" height="100px"></ejs-splitter>'
})
export class AppComponent {
 public paneSettings: PanePropertiesModel[] = [
     {collapsible: false , content : 'Left pane' , size : '30%'},
     {collapsible : true , content : 'Right pane' , size : '75%'}
     ];
}

separatorSize

number

Specifies the size of the separator line for both horizontal or vertical orientation. The separator is used to separate the panes by lines.

width

string

Specifies the width of the Splitter control, which accepts both string and number values as width. The string value can be either in pixel or percentage format.