ColorPickerComponent
23 Sep 20253 minutes to read
Represents the EJ2 Angular ColorPicker Component.
<input ejs-colorpicker type='color'/>Properties
columns number
It is used to render the ColorPicker palette with specified columns.
Defaults to 10
createPopupOnClick boolean
Specifies the popup element creation on open.
Defaults to false
cssClass string
This property sets the CSS classes to root element of the ColorPicker
which helps to customize the UI styles.
Defaults to ’’
disabled boolean
It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open.
Defaults to false
enableOpacity boolean
It is used to enable / disable the opacity option of ColorPicker component.
Defaults to true
enablePersistence boolean
To enable or disable persisting component’s state between page reloads and it is extended from component class.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
inline boolean
It is used to render the ColorPicker component as inline.
Defaults to false
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
mode ColorPickerMode
It is used to render the ColorPicker with the specified mode.
Defaults to ‘Picker’
modeSwitcher boolean
It is used to show / hide the mode switcher button of ColorPicker component.
Defaults to true
noColor boolean
It is used to enable / disable the no color option of ColorPicker component.
Defaults to false
presetColors { : }
It is used to load custom colors to palette.
Defaults to null
showButtons boolean
It is used to show / hide the control buttons (apply / cancel) of ColorPicker component.
Defaults to true
showRecentColors boolean
Specifies to show the recent color options in the color picker in the palate mode.
It accepts boolean value to configure recent colors. The default value is false.
If this property value is false, then the recent color user interface is not rendered in color picker component.
This recent color option is rendered only in the palette mode.
Defaults to false
value string
It is used to set the color value for ColorPicker. It should be specified as Hex code.
Defaults to ‘#008000ff’
Methods
destroy
Removes the component from the DOM and detaches all its related event handlers.
Also it maintains the initial input element from the DOM.
Returns void
focusIn
Sets the focus to Colorpicker
its native method
Returns void
getPersistData
Gets the properties to be maintained in the persisted state.
Returns string
getValue
To get color value in specified type.
| Parameter | Type | Description |
|---|---|---|
| value (optional) | string |
Specify the color value. |
| type (optional) | string |
Specify the type to which the specified color needs to be converted. |
Returns string
toggle
To show/hide ColorPicker popup based on current state of the SplitButton.
Returns void
Events
beforeClose EmitType<BeforeOpenCloseEventArgs>
Triggers before closing the ColorPicker popup.
beforeModeSwitch EmitType<ModeSwitchEventArgs>
Triggers before Switching between ColorPicker mode.
beforeOpen EmitType<BeforeOpenCloseEventArgs>
Triggers before opening the ColorPicker popup.
beforeTileRender EmitType<PaletteTileEventArgs>
Trigger while rendering each palette tile.
change EmitType<ColorPickerEventArgs>
Triggers while changing the colors. It will be triggered based on the showButtons property.
If the property is false, the event will be triggered while selecting the colors.
If the property is true, the event will be triggered while apply the selected color.
created EmitType<Event>
Triggers once the component rendering is completed.
onModeSwitch EmitType<ModeSwitchEventArgs>
Triggers after Switching between ColorPicker mode.
open EmitType<OpenEventArgs>
Triggers while opening the ColorPicker popup.
select EmitType<ColorPickerEventArgs>
Triggers while selecting the color in picker / palette, when showButtons property is enabled.