Contents
- Accessibility and Localization
- AjaxSettings
- Animation
- Items
- Common
Having trouble getting help?
Contact Support
Contact Support
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) {} |