FlatColorPickerComponent

Represents the Kendo UI FlatColorPicker component for Angular.

The FlatColorPickerComponent lets you choose colors through palettes with predefined sets of colors and through a gradient that renders an HSV canvas. You can preview the selected color, revert it to its previous state, or clear it.

html

<kendo-flatcolorpicker [(value)]="selectedColor"></kendo-flatcolorpicker>

Selector

kendo-flatcolorpicker

Export Name

Accessible in templates as #kendoFlatColorPickerInstance="kendoFlatColorPicker"

Inputs

Name	Type	Default	Description
actionsLayout	ColorPickerActionsLayout	'end'	Configures the layout of the Apply and Cancel action buttons.
activeView	ColorPickerView		Sets the initially active view in the FlatColorPicker. Supports two-way binding.
clearButton	boolean	true	Specifies whether the FlatColorPicker displays a Clear color button.
disabled	boolean	false	Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see Forms Support.
format	OutputFormat	'rgba'	Specifies the output format of the FlatColorPicker. If the input value is in a different format, the component parses it into the specified output format.
gradientSettings	GradientSettings		Configures the gradient view.
paletteSettings	PaletteSettings		Configures the palette view.
preview	boolean	true	Displays Apply and Cancel action buttons and a color preview pane. When enabled, the component value does not change immediately upon color selection, but only after the Apply button is clicked. The Cancel button reverts the current selection to its initial state, i.e., to the current value.
readonly	boolean	false	Sets the read-only state of the FlatColorPicker.
size	InputSize	'medium'	Sets the size of the FlatColorPicker internal elements.
tabindex	number	0	Specifies the tabindex of the component.
value	string		Specifies the initially selected color.
views	ColorPickerView[]		Specifies the views to render. The default value is gradient and palette.

Events

Name	Type	Description
activeViewChange	EventEmitter<string>	Fires when the view is about to change. Used to provide a two-way binding for the activeView property.
cancel	EventEmitter<ColorPickerCancelEvent>	Fires when the user cancels the current color selection. The event is emitted on preview pane or on 'Cancel' button click.
valueChange	EventEmitter<any>	Fires when the component value changes.

Methods

blur
Blurs the wrapper of the FlatColorPicker.

focus
Focuses the wrapper of the FlatColorPicker.

reset
Clears the value of the FlatColorPicker.