This article describes the API migration process of ColorPicker component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | property: value <input ej-colorpicker id="colorpicker" value="#278787" /> |
property: value <input ejs-colorpicker id="colorpicker" value="#278787" /> |
Inline mode color picker | property: displayInline <input ej-colorpicker id="colorpicker" [displayInline]="true" /> |
property: inline <input ejs-colorpicker id="colorpicker" [inline]="true" /> |
Adding custom class | property: cssClass <input ej-colorpicker id="colorpicker" cssClass ="custom-class" /> |
property: cssClass <input ejs-colorpicker id="colorpicker" cssClass="custom-class" /> |
Disable the ColorPicker component | property: enabled <input ej-colorpicker id="colorpicker" [enabled]="false" /> |
property: disabled <input ejs-colorpicker id="colorpicker" [disabled]="true" /> |
To display custom text in button elements | property: buttonText <input ej-colorpicker id="colorpicker" [buttonText]="buttonText" /> buttonText: Object = { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }; |
Not Applicable |
To display customized text or content when mouse over the color picker elements | property: tooltipText <input ej-colorpicker id="colorpicker" [tooltipText]="tooltipText" /> tooltipText: Object = { switcher: “Switch”, currentColor: “New Color”, selectedColor: “Old Color” }; |
Not Applicable |
Disable / hide opacity | property: enableOpacity <input ej-colorpicker id="colorpicker" [enableOpacity]="false" /> |
property: enableOpacity <input ejs-colorpicker id="colorpicker" [enableOpacity]="false" /> |
ColorPicker Button mode | property: buttonMode <input ej-colorpicker id="colorpicker" buttonMode="Dropdown" /> |
Not Applicable |
To show / hide the control (apply / cancel) buttons | property: showApplyCancel <input ej-colorpicker id="colorpicker" [showApplyCancel]="false" /> |
property: showButtons <input ejs-colorpicker id="colorpicker" [showButtons]="false" /> |
To show / hide the clear button | property: showClearButton <input ej-colorpicker id="colorpicker" [showClearButton]="false" /> |
Not Applicable |
Show / hide the mode (picker / palette) switcher | property: showSwitcher <input ej-colorpicker id="colorpicker" [showSwitcher]="false" /> |
property: modeSwitcher <input ejs-colorpicker id="colorpicker" [modeSwitcher]="false" /> |
To show / hide the preview area | property: showPreview <input ej-colorpicker id="colorpicker" [showPreview]="false" /> |
Not Applicable |
To show / hide the recent selected color list | property: showRecentColors <input ej-colorpicker id="colorpicker" [showRecentColors]="true" /> |
Not Applicable |
To show / hide the color picker slider tooltip | property: showTooltip <input ej-colorpicker id="colorpicker" [showTooltip]="false" /> |
Not Applicable |
Custom icon in dropdown control color area | property: toolIcon <input ej-colorpicker id="colorpicker" toolIcon="e-font-icon" /> |
Not Applicable |
ColorPicker mode | property: modelType <input ej-colorpicker id="colorpicker" modelType ="Palette" /> |
property: mode <input ejs-colorpicker id="colorpicker" mode="Palette" /> |
Opacity value | property: opacityValue <input ej-colorpicker id="colorpicker" opacityValue=80 /> |
Not Applicable |
Number of columns in color palette | property: columns <input ej-colorpicker id="colorpicker" columns=10 /> |
property: columns <input ejs-colorpicker id="colorpicker" columns=15 /> |
Custom colors | property: palette <input ej-colorpicker id="colorpicker" palette="CustomPalette" modelType ="Palette" [custom]="colors" /> colors: Array<any> = [ “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” ]; |
property: presetColors <input ejs-colorpicker id="colorpicker" mode="Palette" [presetColors]="colors" /> colors: { [key: string]: string[] } = { ‘custom’: [ “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” ] }; |
Rendering palette from the predefined set of palettes | property: presetType <input ej-colorpicker id="colorpicker" modelType="Palette" presetType="FlatColors" /> |
Not Applicable |
No color option in color palette | Not Applicable | property: noColor <input ejs-colorpicker id="colorpicker" [noColor]="true" [modeSwitcher]="false" mode="Palette" /> |
Localization | property: locale ej.ColorPicker.Locale[“zh-CN”] = { buttonText: { apply: “应用”, cancel: “取消”, swatches: “色板” }, tooltipText: { switcher: “切换器, addButton: “添加颜色”, basic: “基本” } } <input ej-colorpicker id="colorpicker" locale="zh-CN" /> |
property: locale L10n.load({ ‘ar’: { “colorpicker”: { “Apply”:“تطبيق”, “Cancel”:“إلغاء”, “ModeSwitcher”: “مفتاح كهربائي الوضع” } } }); <input ejs-colorpicker id="element" locale="ar" /> |
Right to left | property: enableRTL <input ej-colorpicker id="colorpicker" [enableRTL] ="true" /> |
property: enableRtl <input ejs-colorpicker id="colorpicker" [enableRtl]="true" /> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Method to open color picker popup | Method: show <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.show(); |
Method: toggle <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.toggle(); |
Method to close color picker popup | Method: hide <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.hide(); |
Method: toggle <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.toggle(); |
Enable the color picker control | Method: enable <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.enable(); |
Not Applicable |
Disables the color picker control | Method: disable <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.disable(); |
Not Applicable |
Method returns the selected color value as hex code | Method: getValue <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(); |
Method returns the selected color value in RGB format | Method: getColor <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getColor(); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(null, ‘RGB’); |
Method convert the color value from hexCode to RGB | Method: hexCodeToRGB <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.hexCodeToRGB(“#278787”); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(“#278787”, ‘RGB’); |
Method convert the color value from RGB to Hex code | Method: RGBToHEX <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.RGBToHEX({r:38,g:133,b:133}); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(“rgb(38,133,133)”, ‘Hex’); |
Method convert the color value from RGB to HSV | Method: RGBToHSV <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.RGBToHSV({h:230,s:98,v:98}); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(“rgb(180,71.1,52.9)”, ‘HSV’); |
Method convert the color value from HSV to RGB | Method: HSVToRGB <input ej-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.HSVToRGB({h:230,s:98,v:98}); |
Method: getValue <input ejs-colorpicker #colorpicker id="colorpicker" /> @ViewChild(‘colorpicker’) public colorPickerObj: ColorPickerComponent; this.colorPickerObj.getValue(“hsv(180,71.1,52.9)”, ‘RGB’); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Event triggers before opening the ColorPicker popup | Not Applicable | Event: beforeOpen <input ejs-colorpicker id="colorpicker" (beforeOpen)="beforeOpen($event)" /> beforeOpen(args) { /** code block */ } |
Event triggers before closing the ColorPicker popup | Not Applicable | Event: beforeClose <input ejs-colorpicker id="colorpicker" (beforeClose)="beforeClose($event)" /> beforeClose(args) { /** code block */ } |
Event triggers after opening the ColorPicker popup | Event: open<input ej-colorpicker id="colorpicker" (open)="open($event)" /> open(args) { /** code block */ } |
Event: open <input ejs-colorpicker id="colorpicker" (open)="open($event)" /> open(args) { /** code block */ } |
Event triggers after closing the ColorPicker popup | Event: close <input ej-colorpicker id="colorpicker" (close)="close($event)" /> close(args) { /** code block */ } |
Not Applicable |
Event triggers once the component rendering is completed | Event: create <input ej-colorpicker id="colorpicker" (create)="create($event)" /> create(args) { /** code block */ } |
Event: created <input ejs-colorpicker id="colorpicker" (created)="created()" /> created() { /** code block */ } |
Event triggers once the color picker control is destroyed | Event: destroy <input ej-colorpicker id="colorpicker" (destroy)="destroy($event)" /> destroy(args) { /** code block */ } |
Not Applicable |
Event triggers before Switching between Picker / Palette mode | Not Applicable | Event: beforeModeSwitch <input ejs-colorpicker id="colorpicker" (beforeModeSwitch)="beforeModeSwitch($event)" /> beforeModeSwitch(args) { /** code block */ } |
Event triggers after color value has been selected | Event: select <input ej-colorpicker id="colorpicker" (select)="select($event)" /> select(args) { /** code block */ } |
Event: select <input ejs-colorpicker id="colorpicker" (select)="select($event)" /> select(args) { /** code block */ } |
Event triggers after color value has been changed | Event: change <input ej-colorpicker id="colorpicker" (change)="change($event)" /> change(args) { /** code block */ } |
Event: change <input ejs-colorpicker id="colorpicker" (change)="change($event)" /> change(args) { /** code block */ } |