Ej1 api migration in Angular Accordion component

4 Apr 202315 minutes to read

This article describes the API migration process of Accordion 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-accordion id="Accordion" [allowKeyboardNavigation]="false" ></ej-accordion> 		Not Applicable
Localization Not Applicable Property : locale
<ejs-accordion id="Accordion" locale="fr-BE" ></ejs-accordion>
Right to left Property: enableRTL
<ej-accordion id="Accordion" [enableRTL]="true"></ej-accordion> 		Property: enableRTL
<ejs-accordion id="Accordion" [enableRTL]="true"> </ejs-accordion>

AjaxSettings

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

Animation

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property :animation
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{collapse: { effect: ‘FlipXDownIn’, duration: 600, easing: ‘ease’ }, expand: { effect: ‘FlipXUpIn’, duration: 600, easing: ‘ease’ }}]
EnableAnimation Property :animation
<ej-accordion id="Accordion" [enableAnimation]="false"></ej-accordion>
 Not Applicable
Expand animation Not Applicable Property :animation.expand
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{expand: { effect: ‘SlideLeft’, duration: 600, easing: ‘ease-in’ }}]
Collapse animation Not Applicable Property :animation.collapse
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{collapse: { effect: ‘SlideLeft’, duration: 600, easing: ‘ease-in’ }}]
Duration [expand / collapse] Not Applicable Property :animation.collapse.duration
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{expand: { duration: 600 }}]
Easing [expand / collapse] Not Applicable Property :animation.collapse.easing
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{expand: { easing: ‘ease-in’ }}]
Effect [expand / collapse] Not Applicable Property :animation.collapse.effect
<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>
TS:
public animation: Object[] = [{expand: { effect: ‘SlideLeft’ }}]

Items

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property : items
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
Content Not Applicable Property : items[0].content
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
public items: Object[] = [{ content: ‘Contents’}];
Custom class Not Applicable Property : items[0].cssClass
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
public items: Object[] = [{ cssClass: ‘customClass’}];
Header Not Applicable Property : items[0].Header
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
public items: Object[] = [{ header: ‘Header1’}];
HeaderSize Property : items[0].headerSize
<ej-accordion id="Accordion" headerSize="50px" ></ej-accordion> 		Not Applicable
Icon class Not Applicable Property : items[0].iconCss
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
public items: Object[] = [{ iconCss: ‘e-icons’ }];
IsExpand Not Applicable Property : items[0].expanded
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
public items: Object[] = [{ expanded: true }];
Collapse Item Method : collapsePanel(index)
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.collapsePanel(0);		 Method : expandItem(index, false)
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.expandItem(0, false);
Expand Item Method : expandPanel(index)
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.expandPanel(0);		 Method :expandItem(index, true)
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.expandItem(0, true);
CollapseAll Method : collapseAll()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.collapseAll();		 Not Applicable
ExpandAll Method : expandAll()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.expandAll();		 Not Applicable
Get ItemsCount Method : getItemsCount()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.getItemsCount();		 Not Applicable
AddItem Method : addItem(text, content, index)
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.addItem(“New item”, “The accordion content”, 2);		 Method : addItem(items, index)
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.addItem([{ header: ‘App’, content: ‘text’ }], 0);
Remove Item Method : removeItem(index)
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.removeItem(0);		 Method : removeItem(index)
<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.removeItem(index);
Disable Items Property : disabledItems
<ej-accordion id="Accordion" disabledItems="[0, 1]"></ej-accordion> 		Not Applicable
Enable Items Property : enabledItems
<ej-accordion id="Accordion" enabledItems="[0, 1]"></ej-accordion> 		Not Applicable
Disable Item Method : disableItems([index])
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.disableItems([1]);		 Method : enableItem(index, false)
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.enableItem(0, false);
Enable Item Method : enableItems([index])
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.enableItems([1]);		 Method : enableItem(index, true)
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.enableItem(0, true);
Hide Item Not Applicable Method : hideItem(index, true)
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.hideItem(0, true)
SelectedItemIndex Property : selectedItemIndex
<ej-accordion id="Accordion" #Accordion [selectedItemIndex]="false"></ej-accordion>
 Not Applicable
Select Not Applicable Method : select(index)
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.select(0);
BeforeActivate Event: beforeActivate
<ej-accordion id='accordion' (beforeActivate)='onbeforeActivate($event)'></ej-accordion>
TS:
onbeforeActivate(event){}		 Event: expanding
<ejs-accordion id="Accordion" #Accordion (expanding)='onexpanding($event)'></ejs-accordion>
TS:
onexpanding(event){}
Activate Event: activate
<ej-accordion id='accordion' (activate)='onActivate($event)'></ej-accordion>
TS:
onActivate(event){}		 Event: expanded
<ejs-accordion id="Accordion" #Accordion (expanded )='onexpanded($event)'></ejs-accordion>
TS:
onexpanded(event){}
beforeInActivate Event: beforeInactivate
<ej-accordion id='accordion' (beforeInactivate)='onbeforeInactivate($event)'></ej-accordion>
TS:
onbeforeInactivate(event){}		 Not Applicable
InActive Event: inActivate
<ej-accordion id=’accordion’ (inActivate)=’onInActivate($event)’></ej-accordion>`
TS:
onInActivate(event){}		 Not Applicable
Clicked Event: clicked
<ejs-accordion id="Accordion" #Accordion (clicked)='onclicked($event)'></ejs-accordion>
TS:
onclicked (event){}		 Not Applicable

Common

Behavior Property in Essential JS 1 Property in Essential JS 2
Collapsible Property : collapsible
<ej-accordion id="Accordion" [collapsible]="false"> </ej-accordion> 		Not Applicable
Collapse speed Property : collapseSpeed
<ej-accordion id="Accordion" collapseSpeed="500"> </ej-accordion> 		Not Applicable
Custom class Property : cssClass
<ej-accordion id="Accordion" cssClass="custom" > </ej-accordion> 		Not Applicable
CustomIcon class Property: customIcon
<ej-accordion id="Accordion" customIcon="custom" > </ej-accordion>
TS:
public custom: Object = {header: “header-close”, selectedHeader: “header-expand”};		 Not Applicable
Enabled Property : enabled
<ej-accordion id="Accordion" enabled="false" > </ej-accordion> 		Not Applicable
Events Property : events
<ej-accordion id="Accordion" events="mouseover" > </ej-accordion> 		Not Applicable
Expand speed Property : expandSpeed
<ej-accordion id="Accordion" expandSpeed="300" > </ej-accordion> 		Not Applicable
Height Property : height
<ej-accordion id="Accordion" height="400" > </ej-accordion> 		Property : height
<ejs-accordion id="Accordion" height="400" > </ejs-accordion>
HeightAdjustMode Property : heightAdjustMode
<ej-accordion id="Accordion" heightAdjustMode="content" > </ej-accordion> 		Not Applicable
HtmlAttributes Property : htmlAttributes
<ej-accordion id="Accordion" [htmlAttributes]="attributes" > </ej-accordion>
TS:
public attributes: Object = {title: “Demo”};		 Not Applicable
MultipleOpen Property : enableMultipleOpen
<ej-accordion id="Accordion" [enableMultipleOpen]="true" > </ej-accordion> 		Property : expandMode
<ejs-accordion id="Accordion" [expandMode]="Multiple" > </ejs-accordion>
Persistence Property : enablePersistence
<ej-accordion id="Accordion" [enablePersistence]="false" > </ej-accordion> 		Property : enablePersistence
<ejs-accordion id="Accordion" [enablePersistence]="true" > </ejs-accordion>
ShowRounderCorner Property : showRoundedCorner
<ej-accordion id="Accordion" [showRoundedCorner]="false" > </ej-accordion> 		Not Applicable
Width Property : width
<ej-accordion id="Accordion" [width]="600" > </ej-accordion> 		Property : width
<ejs-accordion id="Accordion" [width]="400" > </ejs-accordion>
Enable Method : enable()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.enable();		 Not Applicable
Disable Method : disable()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.disable();		 Not Applicable
Show Method : show()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.show();		 Not Applicable
Hide Method : hide()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.hide();		 Not Applicable
Destroy Method : destroy()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.destroy();		 Method : destroy()
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.destroy();
Refresh Method : refresh()
<ej-accordion id="Accordion" #Accordion></ej-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.refresh();		 Method : refresh()
<ejs-accordion id="Accordion" #Accordion></ejs-accordion>
TS:
@ViewChild(‘Accordion’) public AccordionObj: AccordionComponent;
AccordionObj.refresh();
Created Event: create
<ej-accordion id="Accordion" #Accordion (create)='oncreate($event)'></ej-accordion>
TS:
oncreate(event) {}		 Event: created
<ejs-accordion id="Accordion" #Accordion (created)='oncreated($event)'></ejs-accordion>
TS:
oncreated(event) {}
Destroyed Event: destroy
<ej-accordion id="Accordion" #Accordion (destroy)='ondestroy($event)'></ej-accordion>
TS:
ondestroy(event) {}		 Event: destroyed
<ejs-accordion id="Accordion" #Accordion (destroyed)='ondestroyed($event)'></ejs-accordion>
TS:
ondestroyed(event) {}