New to Kendo UI for AngularStart a free 30-day trial

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.

Definition

Package:@progress/kendo-angular-inputs

Selector:kendo-flatcolorpicker

Export Name:Accessible in templates as #kendoFlatColorPickerInstance="kendoFlatColorPicker"

Syntax:

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

Inputs

Configures the layout of the Apply and Cancel action buttons.

Default:

'end'

Sets the initially active view in the FlatColorPicker. Supports two-way binding.

Specifies whether the FlatColorPicker displays a Clear color button.

Default:

true

disabled

boolean

Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see Forms Support.

Default:

false

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.

Default:

'rgba'

Configures the gradient view.

Configures the palette view.

preview

boolean

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.

Default:

true

readonly

boolean

Sets the read-only state of the FlatColorPicker.

Default:

false

Sets the size of the FlatColorPicker internal elements. The default value is set by the Kendo theme.

tabindex

number

Specifies the tabindex of the component.

Default:

0

value

string

Specifies the initially selected color.

Specifies the views to render. The default value is gradient and palette.

Events

Fires when the view is about to change. Used to provide a two-way binding for the activeView property.

Fires when the user cancels the current color selection.

The event is emitted on preview pane or on 'Cancel' button click.

Fires when the component value changes.

Methods

Blurs the wrapper of the FlatColorPicker.

Focuses the wrapper of the FlatColorPicker.

Clears the value of the FlatColorPicker.