Ej1 api migration in Angular Tab component

4 Apr 202315 minutes to read

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

Accessibility and Localization

Behavior Property in Essential JS 1 Property in Essential JS 2
Keyboard Navigation Property : allowKeyboardNavigation
<ej-tab id="Tab" [allowKeyboardNavigation]="false" ></ej-tab> 		Not Applicable
Localization Not Applicable Property : locale
<ejs-tab id="Tab" locale="fr-BE"></ejs-tab>
Right to left Property: enableRTL
<ej-tab id="tab" [enableRTL]="true></ej-tab> 		Property: enableRTL
<ejs-tab id='tab' [enableRTL]='true'> </ejs-tab>

AjaxSettings

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Property : ajaxSettings
<ej-tab id="tab" [ajaxSettings.type]="GET"></ej-tab> 		Not Applicable
Asynchronous Property : ajaxSettings.async
<ej-tab id="tab" [ajaxSettings.async]="true "></ej-tab> 		Not Applicable
Browser Cache Property: ajaxSettings.cache
<ej-tab id="tab" [ajaxSettings.cache]="false "></ej-tab> 		Not Applicable
Request type Property : ajaxSettings.contentType
<ej-tab id="tab" [ajaxSettings.contentType]="html "></ej-tab> 		Not Applicable
Data Property : ajaxSettings.data
<ej-tab id="tab" [ajaxSettings.data]={ }></ej-tab> 		Not Applicable
Response type Property : ajaxSettings.dataType
<ej-tab id="tab" [ajaxSettings.dataType]="html"></ej-tab> 		Not Applicable
HTTP request type Property: ajaxSettings.type
<ej-tab id="tab" [ajaxSettings.type]="GET"></ej-tab> 		Not Applicable
AjaxBeforeLoad Event: ajaxBeforeLoad
<ej-tab id='tab' (ajaxBeforeLoad)='onajaxBeforeLoad($event)'></ej-tab>
TS:
onajaxBeforeLoad (event){ }		 Not Applicable
AjaxError Event: AjaxError
<ej-tab id='tab' (ajaxError)='onajaxError($event)'></ej-tab>
TS:
onajaxError (event){ }		 Not Applicable
AjaxLoad Event: ajaxLoad
<ej-tab id='tab' (ajaxLoad)='onajaxLoad($event)'></ej-tab>
TS:
onajaxLoad (event){ }		 Not Applicable
AjaxSuccess Event: ajaxSuccess
<ej-tab id='tab' (ajaxSuccess)='onajaxSuccess ($event)'></ej-tab>
TS:
onajaxSuccess (event){ }		 Not Applicable

Animation

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property :animation
<ejs-tab id="tab" [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [ { prev: { }, next: { } } ]
EnableAnimation Property :animation
<ej-tab id="tab" [enableAnimation]="false"></ej-tab>
 Not Applicable
Previous animation Not Applicable Property :animation.prev
<ejs-tab id='tab' [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [{prev: { duration: 400,easing: ‘ease-in’, effect: ‘SlideLeft’}}]
Next animation Not Applicable Property :animation.next
<ejs-tab id='tab' [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [{next: {duration: 400, easing: ‘ease-in’, effect: ‘SlideLeft’ }}]
Duration [prev / next] Not Applicable Property :animation.collapse.duration
<ejs-tab id='tab' [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [{prev: { duration: 400 }}]
Easing [expand / collapse] Not Applicable Property :animation.next.easing
<ejs-tab id='tab' [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [{prev: { easing: ‘ease-in’ }}]
Effect [expand / collapse] Not Applicable Property :animation.next.effect
<ejs-tab id='tab' [animation]="animation"></ejs-tab>
TS:
public animation: Object[] = [{prev: { effect: ‘SlideLeft’ }}]
Behavior Property in Essential JS 1 Property in Essential JS 2
Header position Property : headerPosition
<ej-tab id="Tab" [headerPosition]="Bottom" ></ej-tab> 		Property : headerPlacement
<ejs-tab id="Tab" [headerPlacement]="Bottom" ></ejs-tab>
Header size Property : headerSize
<ej-tab id="Tab" [headerSize]="100px" ></ej-tab> 		Not Applicable
OverflowModes Not Applicable Property: overflowMode
<ejs-tab id='tab' [overflowMode]='Popup'> </ejs-tab>
TabScroll Property: enableTabScroll
<ej-tab id="Tab" [enableTabScroll]="false" ></ej-tab> 		Not Applicable

Items

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property : items
<ejs-tab id="tab" [items]="items"> </ejs-tab>
Content Not Applicable Property : items[0].content
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{ content: ‘Contents’}];
Custom class Not Applicable Property : items[0].cssClass
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{ cssClass: ‘customClass’}];
Header Not Applicable Property : items[0].Header
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{ header: ‘{ }];
Icon class Not Applicable Property : items[0].header.iconCss
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{ header: { iconCss: ‘e-icon’ }}];
Icon position Not Applicable Property : items[0].header.iconPosition
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{ header: { iconPosition: ‘Left’ } }];
Header text Not Applicable Property : items[0].header.text
<ejs-tab id="tab" [items]="items"> </ejs-tab>
TS:
public items: Object[] = [{header: { text: ‘Tab1’ }}];
Get items length Method : getItemsCount()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.getItemsCount();		 Not Applicable
Add Items Method : addItem(url, displayLabel, index, cssClass, id)
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.addItem(“#new”, “New Item”, 3, “myClass”, “newItem”);		 Method :addTab(items, index)
<ejs-tab id="tab" #Tab> </ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.addTab([{   header: { text: ‘Tab1’ },content: ‘contents’ }], 1 );
BeforeAdd Not Applicable Event: adding
<ejs-tab id="tab" #Tab (adding)='onadding($event)'> </ejs-tab>
TS:
onadding(event){ }
AfterAdd Event: itemAdd
<ej-tab id='tab' (itemAdd)='onitemAdd($event)'></ej-tab>
TS:
onitemAdd(event){ }		 Event: added
<ejs-tab id="tab" (added)='onadded($event)'></ejs-tab>
TS:
onadded(event){ }
Remove Item Method : removeItem(index)
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.removeItem(0);		 Method :addItem(items, index)
<ejs-tab id="tab" #Tab> </ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.addItem([{ header: ‘App’, content: ‘text’ }], 0);
BeforeRemove Event: beforeItemRemove
<ej-tab id='tab' (beforeItemRemove)='onbeforeItemRemove($event)'></ej-tab>
TS:
onbeforeItemRemove(event){ }		 Event: removing
<ejs-tab id="tab" #Tab (removing)='onremoving($event)'></ejs-tab>
TS:
onremoving(event){ }
AfterRemove Event: afterRemove
<ej-tab id='tab' (itemRemove)='onitemRemove($event)'></ej-tab>
TS:
onitemRemove(event){ }		 Event: removed
<ejs-tab id="tab" #Tab (removed)='onremoved($event)'></ejs-tab>
TS:
onremoved(event){ }
Select item Not Applicable Method :select(index)
<ejs-tab id="tab" #Tab> </ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.select(1);
SelectedItemIndex Property : selectedItemIndex
<ej-tab id="tab" selectedItemIndex="1" > </ej-tab> 		Property : selectedItem
<ejs-tab id="tab" selectedItem="1" > </ejs-tab>
BeforeActive Event: beforeActive
<ejs-tab id="tab" #Tab (beforeActive)='onbeforeActive($event)'></ejs-tab>
TS:
onbeforeActive(event){ }		 Event: selecting
<ejs-tab id="tab" #Tab (selecting)='onselecting($event)'></ejs-tab>
TS:
onselecting(event){ }
AfterActive Event: itemActive
<ejs-tab id="tab" #Tab (itemActive)='onitemActive($event)'></ejs-tab>
TS:
onitemActive(event){ }		 Event: selected
<ejs-tab id="tab" #Tab (selected)='onselected($event)'></ejs-tab>
TS:
onselected(event){ }
Disable items Property : disabledItemIndex
<ej-tab id="tab" disabledItemIndex="[1,2]" > </ej-tab> 		Not Applicable
Enable items Property : enabledItemIndex
<ej-tab id="tab" enabledItemIndex="[1,2]" > </ej-tab> 		Not Applicable
Enable/Disable item Not Applicable Property : items[0].disabled
<ejs-tab id="tab" [items]="items" > </ejs-tab>
TS:
public items: Object[] = [{ disabled: true }];
Hide items Property : hiddenItemIndex
<ej-tab id="tab" hiddenItemIndex="[1,2]" > </ej-tab> 		Not Applicable
Hide item Method : hideItem(index)
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.hideItem(1);		 Method :hideTab(index, true)
<ejs-tab id="tab" #Tab> </ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.hideTab(1, true);
Show item Method : showItem(index)
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.showItem(1);		 Method : hideTab(index, false)
<ejs-tab id="tab" #Tab> </ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.hideTab(1, false);

Common

Behavior Property in Essential JS 1 Property in Essential JS 2
Collapse active item Property : collapsible
<ej-tab id="tab" [collapsible]="true"> </ej-tab> 		Not Applicable
Custom class Property : cssClass
<ej-tab id="tab" cssClass="customClass" > </ej-tab> 		Property : cssClass
<ejs-tab id="tab" cssClass="customClass" > </ejs-tab>
Enabled Property : enabled
<ej-tab id="tab" enabled="false"> </ej-tab> 		Method : disable(false)
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.disable(false);
Persistence Property : enablePersistence
<ej-tab id="tab" [enablePersistence]="false" > </ej-tab> 		Property : enablePersistence
<ejs-tab id="tab" [enablePersistence]="false" > </ejs-tab>
Events Property : events
<ej-tab id="tab" events="click" > </ej-tab> 		Not Applicable
Height Property : height
<ej-tab id="Tab" height="100%" > </ej-tab> 		Property : height
<ejs-tab id="Tab" height="100%" > </ejs-tab>
HeightAdjustMode Property : heightAdjustMode
<ej-tab id="Tab" heightAdjustMode="Content" > </ej-tab> 		Property : heightAdjustMode
<ejs-tab id="Tab" heightAdjustMode="Content" > </ejs-tab>
HtmlAttributes Property : htmlAttributes
<ej-tab id="Tab" [htmlAttributes]="attributes" > </ej-tab>
TS:
public attributes: Object = {class: “my-class”};		 Not Applicable
ID prefix Property : idPrefix
<ej-tab id="Tab" [idPrefix]="ej-tab-" > </ej-tab> 		Not Applicable
ShowCloseButton Property : showCloseButton
<ej-tab id="Tab" [showCloseButton]="true" > </ej-tab> 		Property : showCloseButton
<ejs-tab id="Tab" [showCloseButton]="true" > </ejs-tab>
showReloadIcon Property : showReloadIcon
<ej-tab id="Tab" [showReloadIcon]="true" > </ej-tab> 		Not Applicable
ShowRounderCorner Property : showRoundedCorner
<ej-tab id="Tab" [showRoundedCorner]="true" > </ej-tab> 		Not Applicable
Destroy Method : destroy()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.destroy();		 Method : destroy()
<ejs-tab id="tab" #Tab></ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.destroy();
Disable Tab Method : disable()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.disable();		 Method : disable(true)
<ejs-tab id="Tab" #Tab></ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.disable(true);
Enable Tab Method : enable()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.enable();		 Method : disable(false)
<ejs-tab id="Tab" #Tab></ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.disable(false);
Show Tab Method : show()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.show();		 Not Applicable
Hide Tab Method : hide()
<ej-tab id="Tab" #Tab></ej-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.hide();		 Not Applicable
Refresh Not Applicable Method : refresh()
<ejs-tab id="tab" #Tab></ejs-tab>
TS:
@ViewChild(‘Tab’) public TabObj: TabComponent;
TabObj.refresh();
Created Event: create
<ej-tab id="tab" #Tab (create)='oncreate($event)'></ej-tab>
TS:
oncreate(event) { }		 Event: created
<ejs-tab id="tab" #Tab (created)='oncreated($event)'></ejs-tab>
TS:
oncreated(event) { }
Destroyed Event: destroy
<ej-tab id="tab" #Tab (destroy)='ondestroy($event)'></ej-tab>
TS:
ondestroy(event) { }		 Event: destroyed
<ejs-tab id="tab" #Tab (destroyed)='ondestroyed($event)'></ejs-tab>
TS:
ondestroyed(event) { }