FlatColorPickerComponent

Represents the Kendo UI FlatColorPicker component for Angular.

The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.

Selector

kendo-flatcolorpicker

Export Name

Accessible in templates as #kendoFlatColorPickerInstance="kendoFlatColorPicker"

Inputs

Name	Type	Default	Description
actionsLayout	ColorPickerActionsLayout		Configures the layout of the Apply and Cancel action buttons. start center end (default) stretch
activeView	ColorPickerView		Sets the initially active view in the FlatColorPicker. The property supports two-way binding. gradient (default) palette
clearButton	boolean	true	Specifies whether the FlatColorPicker should display a 'Clear color' button.
disabled	boolean	false	Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on Forms Support.
format	OutputFormat		Specifies the output format of the FlatColorPicker. If the input value is in a different format, it will be parsed into the specified output format. The supported values are: rgba (default) hex
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 will 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		The size property specifies the padding of the FlatColorPicker internal elements. The possible values are: small medium (default) large none
tabindex	number	0	Specifies the tabindex of the component.
value	string		Specifies the initially selected color.
views	ColorPickerView[]		Specifies the views that will be rendered. Default value is gradient and palette.

Events

Name	Type	Description
activeViewChange	EventEmitter<string>	Fires each time 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 each time the component value is changed.

Methods

blur
Blurs the wrapper of the FlatColorPicker.

focus
Focuses the wrapper of the FlatColorPicker.

reset
Clears the value of the FlatColorPicker.