Ej1 api migration in Angular Dialog component

4 Apr 202310 minutes to read

This article describes the API migration process of Dialog 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-dialog id='dialog'[allowKeyboardNavigation]='true'> </ej-dialog> | No separate Property for enable/disable keyboard navigation. Its enabled by default. |
| Localization | Property : locale
<ej-dialog id='dialog'[locale]='es-ES'></ej-dialog> | Property : locale
<ejs-dialog id='#dialog' locale='fr-BE'></ejs-dialog>
ngOnInit() { // Load French culture for Dialog close button tooltip text <br/> L10n.load({ 'fr-BE': {'dialog': {'close': 'Fermer'}}}); } |
| Right to left | Property: enableRTL
<ej-dialog id='dialog' [enableRTL]='true'></ej-dialog> | Property: enableRTL
<ejs-dialog id='dialog' [enableRTL]='true'></ejs-dialog> |

Header

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Header Content | Property : title
<ej-dialog id='dialog' [enableRTL]='true' title='EJ1 Dialog header'></ej-dialog>
Method : setTitle
$(‘#dialog’).ejDialog(‘setTitle’, ‘EJ1 Dialog Header’); | Property : header
<ejs-dialog id='dialog' header='EJ2 Dialog header'></ejs-dialog> |
| close button | Property : actionButtons
<ej-dialog id='dialog' [actionButtons]='actionbuttons'></ej-dialog>
TS :actionbuttons: any;
constructor() { this.actionbuttons = [‘close’];} | Property : showCloseIcon
<ejs-dialog id='dialog' [showCloseIcon]= 'true'></ejs-dialog> |
| Event triggers when click on action buttons | Event: actionButtonClick
<ej-dialog id='dialog' [actionButtons]='actionbuttons' (actionButtonClick)='buttonAction($event)'></ej-dialog>
TS:
actionbuttons: any;
constructor() { this.actionbuttons = [‘close’];} buttonAction(event){ } | Not Applicable |
| Minimize | Property : actionButtons
<ej-dialog id='dialog' [actionButtons]='actionbuttons'></ej-dialog>
TS:
actionbuttons: any;
constructor() { this.actionbuttons = [minimize];} | Not Applicable |
| Maximize | Property : actionButtons
<ej-dialog id='dialog' [actionButtons]='actionbuttons'></ej-dialog>
TS:
actionbuttons: any;
constructor() { this.actionbuttons = [maximize];} | Not Applicable |
| Collapse /Expand | Property : actionButtons
Method : collapse(), expand ()
<ej-dialog id='dialog' [actionButtons]='actionbuttons'></ej-dialog>
TS:
actionbuttons: any;
constructor() { this.actionbuttons = [’ collapsible ‘];}
$(‘#dialog’).ejDialog(‘collapse’);
$(‘#dialog’).ejDialog(‘expand’) | Not Applicable |
| Event triggers when expanding the collapsed dialog | Event: expand
<ej-dialog id='dialog' (expand)='expandAction($event)'></ej-dialog>
TS:
expandAction (event){} | Not Applicable |
| Event triggers when collapsing the expanded dialog | Event: collapse
<ej-dialog id='dialog' (collapse)=' collapseAction($event)'></ej-dialog>
TS:
collapseAction (event){} | Not Applicable |
| Pin | Property : actionButtons
<ej-dialog id='dialog' [actionButtons]='actionbuttons'></ej-dialog>
TS:
actionbuttons: any;
constructor() { this.actionbuttons = [pin];} | Not Applicable |
| Header visibility | Property: showHeader
<ej-dialog id='dialog' [showHeader]='true'></ej-dialog> | Not Applicable |
| Close on escape key press | Property : closeOnEscape
<ej-dialog id='dialog' [closeOnEscape]='true'></ej-dialog>| Property : closeOnEscape
<ejs-dialog id='dialog' [closeOnEscape]='true'></ejs-dialog> |

Footer

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Footer Content | Property :footerTemplateId
<ej-dialog id='dialog' [footerTemplateId]= 'sample'></ej-dialog>| Property: footerTemplate
<ejs-dialog id='dialog' [footerTemplate]= '<button>Submit</button>'></ejs-dialog> |
| Footer action buttons | Not applicable | Property : buttons
<ejs-dialog id='dialog' [buttons]='buttons'></ejs-dialog>
TS:
public buttons: Object=[{ click: dialogBtnClick, buttonModel: {content: ‘OK’, isPrimary: true} }] |
| Footer visibility | Property : showFooter
<ej-dialog id='dialog' [showFooter]= 'true'></ej-dialog> | Not Applicable |

Content

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Dialog content | Method : setContent
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘setContent’, ‘Dialog Content’) | Property : content
<ejs-dialog id='dialog' content=Dialog Content></ejs-dialog> |
| Loading content using AJAX request | Property : contentType, contentUrl
<ej-dialog id='dialog' contentType='ajax' contentUrl=' '></ej-dialog> | Not Applicable |
| Event triggers after the dialog content loaded in DOM | Event: contentLoad
<ej-dialog id='dialog' (contentLoad)='onLoad($event)'></ej-dialog>
TS:
onLoad (event){} | Not Applicable |
| Event trigger when fails to load ajax content | Event: ajaxError
<ej-dialog id='dialog' (ajaxError)='onAjaxError ($event)'></ej-dialog>
TS:
onAjaxError (event){} | Not Applicable |
| Event trigger when load ajax content successfully | Event: ajaxSuccess
<ej-dialog id='dialog' (ajaxSuccess)='onAjaxSuccess ($event)'></ej-dialog>
TS:
onAjaxSuccess (event){} | Not Applicable |

Animation

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Enabling Animation | Property : enableAnimation
<ej-dialog id='dialog' [enableAnimation]='true'></ej-dialog>| Not Applicable |
| Animation effects | Property : animation.show.effect
<ej-dialog id='dialog' [animation]='animation'></ej-dialog>
TS:
public animation: object ={show: {effect: ‘slide’}}; | Property : animationSettings.effect
<ejs-dialog id='dialog' [animationSettings]=' animation '></ejs-dialog>
TS:
public animation: Object = { effect: ‘Zoom’}; |
| Animation duration | Property: animation.show.duration
<ej-dialog id='dialog' [animation]='animation'></ej-dialog>
TS:
public animation: object ={show: {effect: ‘slide’, duration: 500}}; | Property : animationSettings.duration
<ejs-dialog id='dialog' [animationSettings]='animation'></ejs-dialog>
TS:
public animation: Object = { effect: ‘Zoom’,duration: 500}; |
| Animation delay | Not applicable | Property: animationSettings.delay
<ejs-dialog id='dialog' [animationSettings]=' animationDelay '></ejs-dialog>
TS:
public animationDelay: Object = { effect: ‘Zoom’,duration: 500,delay: 300 }; |

Draggable and resizing

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Draggable dialog | Property : allowDraggable
<ej-dialog id='dialog' [allowDraggable]='true'></ej-dialog> | Property : allowDragging
<ejs-dialog id='dialog' [allowDragging]=' true '></ejs-dialog> |
| Event triggers when the user drags the dialog | Event: drag
<ej-dialog id='dialog' (drag)='onDrag ($event)'></ej-dialog>
TS:
onDrag (event){} | Event: drag
<ejs-dialog id='dialog' (drag)='onDrag()'></ejs-dialog>
TS:
public onDrag: EmitType

Target

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Target element to append dialog in document | Property : target
<ej-dialog id='dialog' target='#dialogTarget'></ej-dialog> | Property: target
<ejs-dialog id='dialog' target='#dialogTarget'></ejs-dialog> |
| Element for draggable area | Property : containment
<ej-dialog id='dialog' containment='#dragArea'></ej-dialog> | Not applicable |

Position

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Customizing dialog position using X, Y coordinate values | Property : position
<ej-dialog id='dialog' [position]='dialogPosition'></ej-dialog>
public dialogPosition: any = { position: { X: 300, Y: 100 }} | Property : position
<ejs-dialog id='dialog' [position]='dialogPosition'></ejs-dialog>
public dialogPosition: object = { position: { X: 300, Y: 100 }} |
| positioning dialog using position values | Not Applicable | Property: position
<ejs-dialog id='dialog' [position]=' dialogPosition'></ejs-dialog>
public dialogPosition: object = { position: { X: ‘Center’, Y: ‘Center’}} |

Visibility

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Render dialog in visible/hidden state | Property: showOnInit
<ej-dialog id='dialog' [showOnInit]= 'true'></ej-dialog> | Property: visible
<ejs-dialog id='dialog' [visible]=' true'></ejs-dialog> |

Dialog Mode

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Render modal dialog |Property : enableModal
<ej-dialog id='dialog' [enableModal]= 'true'></ej-dialog> | Property : isModal
<ejs-dialog id='dialog' [isModal]= ' true'></ejs-dialog> |

Tooltip

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Sets the tooltip for dialog buttons | Property : tooltip
<ej-dialog id='dialog' [tooltip]= 'tooltip'></ej-dialog>
TS:
public tooltip: object { close: ‘Exit’ }; | No Separate Property for tooltip. It renders based on locale text. |

Control State

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Enable/Disable the control | Property : enabled
<ej-dialog id='dialog' [enabled]= 'false'></ej-dialog> | Not Applicable |
| Enable/ Disable page scrolling | Property: backgroundScroll
<ej-dialog id='dialog' [backgroundScroll]= 'false'></ej-dialog> | No separate Property for disabling page scroll. By default, scrolling prevented for modal dialog |

State Maintenance

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Save the model values in local storage or cookies |Property : enablePersistence
<ej-dialog id='dialog' [enablePersistence]= 'true'></ej-dialog> |Property : enablePersistence
<ejs-dialog id='dialog' [enablePersistence]= 'true'></ejs-dialog> |

Common

| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
| ———— | ————————- | ————————- |
| Adjusting Height | Property : height
<ej-dialog id='dialog' height='400'></ej-dialog> | Property : height
<ejs-dialog id='dialog' height='50%'></ejs-dialog> |
| Adjusting width | Property: width
<ej-dialog id='dialog' width='400'></ej-dialog> |Property : width
<ejs-dialog id='dialog' width ='50%'></ejs-dialog> |
| Adding custom class | Property: cssClass
<ej-dialog id='dialog' cssClass =' custom-class'></ej-dialog> | Property: cssClass
<ejs-dialog id='dialog' cssClass ='custom-class'></ejs-dialog> |
| Adding zIndex | Property: zIndex
<ej-dialog id='dialog' [zIndex] ='2000'></ej-dialog>| Property: zIndex
<ejs-dialog id='dialog' [zIndex]='2000'></ejs-dialog> |
| Maximum height | Property: maxHeight
<ej-dialog id='dialog' maxHeight ='600'></ej-dialog> | Not Applicable |
| Maximum width | Property: maxWidth
<ej-dialog id='dialog' maxWidth ='600'></ej-dialog> | Not Applicable |
| Minimum height | Property: minHeight
<ej-dialog id='dialog' minHeight ='300'></ej-dialog> | Not Applicable |
| Minimum width | Property: minWidth
<ej-dialog id='dialog' minWidth ='300'></ej-dialog> | Not Applicable |
| Adding html attributes | Property: htmlAttributes
<ej-dialog id='dialog' [htmlAttributes] ='htmlAttributes'></ej-dialog>
TS:
public htmlAttributes: object { class: ‘my-class’ } | Not Applicable |
| Custom icon in the header | Property: faviconCSS
<ej-dialog id='dialog' [faviconCSS] ='custom-icon'></ej-dialog> | Not Applicable |
| Rounded corner appearance | Property: showRoundedCorner
<ej-dialog id='dialog' [showRoundedCorner] ='true'></ej-dialog> | Not Applicable |
| Make control flexible for mobile view | Property: isResponsive
<ej-dialog id='dialog' [isResponsive] ='true'></ej-dialog> | Not Applicable |
| Close the Dialog | Method: close()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘close’) | Method : hide()
<ejs-dialog id='dialog' #defaultDialog></ejs-dialog>
TS:
@ViewChild(‘defaultDialog’) public defaultDialog: DialogComponent;
defaultDialog.hide() |
| Event triggers before the dialog closes | Event: beforeClose
<ej-dialog id='dialog' (beforeClose)='onBeforeClose ($event)'></ej-dialog>
TS:
onBeforeClose (event) {} | Event: beforeClose
<ejs-dialog id='dialog' (beforeClose)='onBeforeClose ()'></ejs-dialog>
TS:
onBeforeClose () {} |
| Event triggers when the dialog closes | Event: close
<ej-dialog id='dialog' (close)='onClose ($event)'></ej-dialog>
TS:
onClose (event) {} | Event: close
<ejs-dialog id='dialog' (close)='onClose ()'></ejs-dialog>
TS:
onClose () {} |
| Destroy the control | Method: destroy()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘destroy’) | Method: destroy()
<ejs-dialog id='dialog' #defaultDialog></ejs-dialog>
TS:
@ViewChild(‘defaultDialog’) public defaultDialog: DialogComponent;
defaultDialog. destroy () |
| Focus the dialog element | Method: focus()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘focus’) | Not Applicable |
| Check whether the dialog is open | Method: isOpen()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘isOpen’) | Not Applicable |
| Maximize the dialog | Method: maximize()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘maximize’) | Not Applicable |
| Minimize the dialog | Method: minimize()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘minimize’) | Not Applicable |
| Open the dialog | Method: open()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘open’) | Method : show()
<ejs-dialog id='dialog' #defaultDialog></ejs-dialog>
TS:
@ViewChild(‘defaultDialog’) public defaultDialog: DialogComponent; defaultDialog. show (); |
| Event trigger before the dialog opens | Event: beforeOpen
<ej-dialog id='dialog' (beforeOpen)='onBeforeOpen ($event)'></ej-dialog>
TS:
onBeforeOpen (event) {} | Event: beforeOpen
<ejs-dialog id='dialog' (beforeOpen)=' onBeforeOpen()'></ejs-dialog>
TS:
onBeforeOpen () {} |
| Event triggers when the opens the dialog | Event: open
<ej-dialog id='dialog' (open)='onOpen ($event)'></ej-dialog>
TS:
onOpen (event) {} | Event: open
<ejs-dialog id='dialog' (open)=' onOpen()'></ejs-dialog>
TS:
onOpen () {} |
| Refresh the dialog | Method: refresh()
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘refresh’) | Method : refreshPosition()
<ejs-dialog id='dialog' #defaultDialog></ejs-dialog>
TS:
@ViewChild(‘defaultDialog’) public defaultDialog: DialogComponent; defaultDialog. refreshPosition(); |
| Pin/ unpin the dialog | Method: pin
<ej-dialog id='dialog'></ej-dialog>
$(‘#dialog’).ejDialog(‘pin’);
$(‘#dialog’).ejDialog(‘unpin’); | Not Applicable |
| Event triggers after the dialog created successfully | Event: create
<ej-dialog id='dialog' (create)='onCreate ($event)'></ej-dialog>
TS:
onCreate (event) {} | Event : created
<ejs-dialog id='dialog' (created)=' onCreated()'></ejs-dialog>
TS:
onCreated () {} |
| Event triggers when the control destroyed successfully | Event: destroy
<ej-dialog id='dialog' (destroy)='onDestroy ($event)'></ej-dialog>
TS:
onDestroy (event) {} | Not Applicable |
| Event triggers on clicking on modal dialog overlay | Not Applicable | Event : overlayClick
<ejs-dialog id='dialog' (overlayClick)=' onOverlayClick()'></ejs-dialog>
TS:
onOverlayClick () {} |