Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Dialog / Migration from Essential JS 1
Search results

Migration from Essential JS 1 in Angular Dialog component

21 Dec 2022 / 11 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>
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>
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 = () => {}
Event triggers when the start to drag the dialog Event: dragStart
<ej-dialog id='dialog' (dragStart)='onDragStart ($event)'></ej-dialog>
TS:
onDragStart (event){}		 Event: dragStart
<ejs-dialog id='dialog' (dragStart)='onDragStart()'></ejs-dialog>
TS:
public onDragStart: EmitType = () => {}
Event triggers when the stops to drag the dialog Event: dragStop
<ej-dialog id='dialog' (dragStop)='onDragStop ($event)'></ej-dialog>
TS:
onDragStop (event){}		 Event: dragStop
<ejs-dialog id='dialog' (dragStop)='onDragStop()'></ejs-dialog>
TS:
public onDragStop: EmitType = () => {}
Resizing dialog Property : enableResize
<ej-dialog id='dialog' [enableResize]='true'></ej-dialog>		 Not applicable
Event triggers when resizing the dialog Event: resize
<ej-dialog id='dialog' (resize)='onReSize ($event)'></ej-dialog>
TS:
onReSize (event){}		 Not Applicable
Event triggers when starts to resizing the dialog Event: resizeStart
<ej-dialog id='dialog' (resizeStart)='onResizeStart ($event)'></ej-dialog>
TS:
onResizeStart (event) {}		 Not Applicable
Event triggers when the stops to resizing the dialog Event: resizeStop
<ej-dialog id='dialog' (resizeStop)='onResizeStop ($event)'></ej-dialog>
TS:
onResizeStop (event) {}		 Not Applicable

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 () {}
Dialog / Setting maxHeight to the Dialog
DocumentEditor / Getting Started