Ej1 api migration in Angular Color picker component

5 Apr 202512 minutes to read

This article describes the API migration process of ColorPicker component from Essential® JS 1 to Essential® JS 2.

Properties

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" />

Methods

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’);

Events

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 */
}