Ej1 api migration in Angular Splitter component

4 Apr 20239 minutes to read

This article describes the API migration process of Splitter component from Essential JS 1 to Essential JS 2.

Common

Behavior API in Essential JS 1 API in Essential JS 2  
Adding custom class Property: cssClass

<ej-splitter id="splitter" cssClass="customClass"></ej-splitter> 		Property: cssClass
<ejs-splitter id=”splitter” cssClass=”customClass”></ejs-splitter>
 
Adjusting Height Property: height

<ej-splitter id="splitter" height="100%"></ej-splitter> 		Property: height
<ejs-splitter id=”splitter” height=”100%”></ejs-splitter> 		 
Adjusting Width Property: width

<ej-splitter id=”splitter” width=”600”></ej-splitter> 		Property: width

<ejs-splitter id=”splitter” width=”100%”></ejs-splitter> 		 
Orientation Property: orientation

<ej-splitter id=”splitter” [orientation]=”orientation”></ej-splitter>
TS:
export class AppComponent {
orientation: any;
constructor() {
this.orientation =
ej.Orientation.Horizontal;
} }
 Property: orientation

<ejs-splitter id=”splitter” orientation=”Horizontal”></ejs-splitter> 		 
Separator Size Not Available Property: separatorSize

<ejs-splitter id=”splitter” separatorSize=4></ejs-splitter> 		 
Adding HTML attributes Property: htmlAttributes

<ej-splitter id=”splitter” [htmlAttributes]=”htmlAttributes”></ej-splitter>
TS:
export class AppComponent {
htmlAttributes: any;
constructor() {
this.htmlAttributes = {
class: “my-class”,
style: “border: 1px solid red”}
}}		 Not Available  
Customize expand/collapse icons Property:
expanderTemplate

<ej-splitter id=”splitter” expanderTemplate=‘<img class=”eimg” src=”expander.png” alt=”employee”/>’></ej-splitter> 		Not Available  
Make control flexible for mobile view Property: isResponsive

<ej-splitter id=”splitter” isResponsive=”true”></ej-splitter> 		By default, Splitter works with mobile mode.  
Refresh the Splitter Method: refresh()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS:
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.refresh();
 Method: refresh()

<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.refresh();
  
Destroy the Control Method: destroy()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.destroy();
 Method: destroy()
<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.destroy();
 Method: destroy()
Event triggers after the Splitter created successfully Event: create

<ej-splitter id=”splitter” #splitter (create)=’onCreate($event)’></ej-splitter>
TS
onCreate(event){ }
 Event: created

<ejs-splitter id=”splitter” #splitter (create)=’onCreate($event)’></ejs-splitter>
TS
onCreate(event){ }
  
Event triggers when Splitter has been destroyed Event: destroy

<ej-splitter id=”splitter” #splitter (destroy)=’onDestroy($event)’></ej-splitter>
TS
onDestroy(event){ }
 Not Available  

Accessibility and Localization

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allowKeyboardNavigation

<ej-splitter id=”splitter” #splitter allowKeyboardNavigation =’true’></ej-splitter> 		No separate property for enable/disable keyboard navigation. Its enabled by default.
Right to Left Property: enableRTL

<ej-splitter id=”splitter” #splitter enableRTL =’false’></ej-splitter> 		Property: enableRtl

<ejs-splitter id=”splitter” #splitter [enableRtl]=’false’></ejs-splitter>

Control State

Behavior API in Essential JS 1 API in Essential JS 2
Enable/Disable the control Not Available Property: enabled

<ejs-splitter id=”splitter” #splitter [enabled]=’true’></ejs-splitter>

State Maintenance

Behavior API in Essential JS 1 API in Essential JS 2
Save the model value in local storage or cookies Not Available Property: enablePersistence

<ejs-splitter id=”splitter” #splitter [enablePersistence] =’true’></ejs-splitter>

Pane Properties

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: properties

<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [];
}
}		 Property: paneSettings
<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>TS
public panes: object[] = [];
Pane Content Not Available Property: content
<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
content: ‘First Pane Content’}];
Change the size of the pane Property: paneSize
<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{paneSize: “30px”}];
}
}
 Property: size
<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{ size: ‘25%’}];
Minimum pane size Property: minSize
<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{minSize: 30}];
}
}
 Property: min

<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
min: ‘60px’}];
Maximum pane size Property: maxSize

<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{maxSize: 30}];
}
}
 Property: max

<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
max: ‘60px’}];
Enable/Disable the Pane Resizable behavior Property: resizable

<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{resizable: false}];
}
}
 Property: resizable

<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
resizable: false}];
Collapsible Property: collapsible

<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{collapsible: true}];
}
}
 Property: collapsible

<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
collapsible: true}];
Expandable Property: expandable

<ej-splitter id=”splitter” #splitter [properties]=”proper”></ej-splitter>
TS
export class AppComponent{
proper: any;
constructor() {
this.proper = [{expandable: true}];
}
}
 Not Available
Collapsed Not Available Property: collapsed

<ejs-splitter id=”splitter” #splitter [paneSettings]=”panes”></ejs-splitter>
TS
public panes: object[] = [{
collapsed: true}];
Add Pane Method: addItem()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
splitterObj.addItem(“New Pane 0”, {
paneSize: 20, minSize: 20, maxSize:
100}, 0);
 Method: addPane()

<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
splitterObj.addPane({size:
“25%”, content: “Pane”}, 0)
Remove Pane Method: removeItem()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
splitterObj.removeItem(0);
 Method: removePane()

<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
splitterObj.removePane(0);
Collapse Pane Method: collapse()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.collapse(0);
 Method: collapse()

<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
splitterObj.collapse(0);
Expand Pane Method: expand()

<ej-splitter id=”splitter” #splitter></ej-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.expand(0);
 Method: expand()

<ejs-splitter id=”splitter” #splitter></ejs-splitter>
TS
@ViewChild(‘splitter’) public
splitterObj: SplitterComponent;
SplitterObj.expand(0);
Event triggers when before panes get expanded/collapsed Event: beforeExpandCollapse

<ej-splitter id=”splitter” #splitter (beforeExpandCollapse)=’ beforeExpandCollapse($event)’></ej-splitter>
TS
beforeExpandCollapse(event){ }
 Event: beforeExpand

<ejs-splitter id=”splitter” #splitter (beforeExpand)=’ beforeExpand($event)’></ejs-splitter>
TS
beforeExpand(event){ }
Event: beforeCollapse
<ejs-splitter id=”splitter” #splitter (beforeCollapse)=’ beforeCollapse ($event)’></ejs-splitter>
TS
beforeCollapse(event){ }
Event triggers when after panes get expanded/collapsed Event: expandCollapse

<ej-splitter id=”splitter” #splitter (expandCollapse)=’ expandCollapse($event)’></ej-splitter>
TS
expandCollapse (event){ }
 Event: expand

<ejs-splitter id=”splitter” #splitter (expand)=’ expand($event)’></ejs-splitter>
TS
expand(event){ }
Event: collapse
<ejs-splitter id=”splitter” #splitter (collapse)=’ collapse ($event)’></ejs-splitter>
TS
collapse (event){ }
Event triggers when Resizing the pane Event: resize

<ej-splitter id=”splitter” #splitter (resize)=’resize($event)’></ej-splitter>
TS
resize(event){ }
 Event: resizing

<ejs-splitter id=”splitter” #splitter (resizing)=’ resizing ($event)’></ejs-splitter>
TS
resizing (event){ }
Event triggers when pane is started to resize Not Available Event: resizeStart

<ejs-splitter id=”splitter” #splitter (resizeStart)=’resizeStart ($event)’></ejs-splitter>
TS
resizeStart (event){ }
Event triggers when pane is stopped to resize Not Available Event: resizeStop

<ejs-splitter id=”splitter” #splitter (resizeStop)=’resizeStop($event)’></ejs-splitter>
TS
resizeStop (event){ }
Event triggers when click template icon Event: clickOnExpander

<ej-splitter id=”splitter” #splitter (clickOnExpander)=’ clickOnExpander($event)’></ej-splitter>
TS
clickOnExpander(event){ }
 Not Available

Animation

Behavior API in Essential JS 1 API in Essential JS 2
EnableAnimation Property: enableAnimation

<ej-splitter id=”splitter” #splitter enableAnimation=”true”></ej-splitter>
 		 Not Available
AnimationSpeed Property: animationSpeed

<ej-splitter id=”splitter” #splitter animationSpeed =150></ej-splitter>
 		 Not Available