ColorPickerComponent

Represents the Kendo UI ColorPicker component for Angular.
Designed to replace the <input type="color"> HTML5 tag which is not widely supported in browsers.

Selector

kendo-colorpicker

Inputs

disabled boolean

Sets the disabled state of the ColorPicker.

format OutputFormat

Specifies the output format of the ColorPicker.
The input value may be in a different format. However, it will be parsed into the output format
after the component processes it.

If the gradient view is used with the opacity option set to true, this setting will be ignored and rgba will be used instead.

The supported values are:

• rgba (default)
• hex
• name

icon string

Defines the name of an existing icon in the Kendo UI theme.
Provide only the name of the icon without the k-icon or the k-i- prefixes.
For example, edit-tools will be parsed to k-icon k-i-edit-tools.

iconClass string | Array<string> | {[key: string]: boolean}

A CSS class name which displays an icon in the ColorPicker button.
iconClass is compatible with the ngClass syntax.

Takes precedence over icon if both are defined.

readonly boolean

Sets the read-only state of the ColorPicker.

view ColorPickerView

Sets what view the ColorPicker will render in the popup.

gradientSettings GradientSettings

Configures the gradient that is displayed in the ColorPicker popup.

paletteSettings PaletteSettings

Configures the palette that is displayed in the ColorPicker popup.

popupSettings PopupSettings

Configures the popup of the ColorPicker.

tabindex number

Specifies the tabindex of the component.

value string

Specifies the value of the initially selected color.

Fields

container ViewContainerRef

Provides a reference to a container element inside the component markup.
The container element references the location of the appended popup—
for example, inside the component markup.

isFocused boolean

Indicates whether the ColorPicker wrapper is focused.

isOpen boolean

Indicates whether the ColorPicker popup is open.

Events

activeColorClick EventEmitter<ActiveColorClickEvent>

Fires each time the left side of the ColorPicker wrapper is clicked.
The event is triggered regardless of whether a ColorPicker icon is set or not.

The ActiveColorClickEvent event provides the option to prevent the popup opening.

close EventEmitter<PreventableEvent>

Fires each time the popup is about to close.
This event is preventable. If you cancel it, the popup will remain open.

blur EventEmitter<any>

Fires each time the ColorPicker is blurred.

focus EventEmitter<any>

Fires each time ColorPicker is focused.

open EventEmitter<PreventableEvent>

Fires each time the popup is about to open.
This event is preventable. If you cancel it, the popup will remain closed.

valueChange EventEmitter<any>

Fires each time the value is changed.

Methods

blur

Blurs the ColorPicker.

focus

Focuses the wrapper of the ColorPicker.

reset

Clears the color value of the ColorPicker.

toggle

Toggles the popup of the ColorPicker.
Does not trigger the open and close events of the component.

Parameters

open? boolean

An optional parameter. Specifies whether the popup will be opened or closed.