Getting started with nxt-color-picker

Installing

npm install --save nxt-color-picker

Import color picker module

import { ColorPickerModule } from 'nxt-color-picker'

@NgModule({
    ...
    imports: [
        ...
        ColorPickerModule
    ]
})

Include it in HTML template

<input [(nxtColor)]="color" 
    [style.background]="color"/>

Configuration options

Input	Type	Default value	Description
[nxtColor]	string	`undefined`	The color to show in the color picker dialog
[width]	string	`'230px'`	Use this option to set color picker dialog width
[height]	string	`'auto'`	Use this option to force color picker dialog height
[toggle]	boolean	`false`	Sets the default open / close state of the color picker
[disabled]	boolean	`false`	Disables opening of the color picker dialog via toggle
[mode]	ColorMode	`'color'`	Dialog color mode
[cmykEnabled]	boolean	`false`	Enables CMYK input format and color change event
[outputFormat]	OutputFormat	`OutputFormatEnum.auto`	Output color format
[alphaChannel]	AlphaChannel	`AlphaChannelEnum.enabled`	Alpha channel mode
[fallbackColor]	string	`undefined`	Used when the color is not well-formed or is undefined
[position]	DialogPosition \| DialogPosition[]	`DialogPositionEnum.auto`	Dialog position
[positionOffset]	number	`0`	Dialog offset percentage relative to the directive element
[presetLabel]	boolean \| string	`true`	Show label for preset colors If string is given, it overrides the default label.
[presetColors]	string[]	`undefined`	Array of preset colors to show in the color picker dialog
[disableInput]	boolean	`false`	Disables / hides the color input field from the dialog
[dialogDisplay]	DialogDisplay	`DialogDisplayEnum.popup`	Dialog positioning mode
[ignoredElements]	any[]	`undefined`	Array of HTML elements that will be ignored when clicked
[saveClickOutside]	boolean	`true`	Save currently selected color when user clicks outside
[closeClickOutside]	boolean	`true`	Close the color picker dialog when user clicks outside
[okButton]	boolean	`false`	Show an OK / Apply button which saves the color
[cancelButton]	boolean	`false`	Show a Cancel / Reset button which resets the color
[presetColorsEditable]	boolean	`false`	Show buttons to add / remove preset colors
[maxPresetColors]	number	`undefined`	Use this option to set the max colors allowed in presets
[useRootViewContainer]	boolean	`false`	Create dialog component in the root view container Note: The root component needs to have public viewContainerRef.

Output	Type	Description
(open)	string	Current color value, emit when dialog is isOpen
(close)	string	Current color value, emit when dialog is closed
(inputChange)	InputChangeEvent	Input name and its value, emit when user changes color through inputs
(toggleChange)	boolean	Status of the dialog, emit when dialog is isOpen / closed
(sliderDragStart)	SliderChangeEvent	Slider name and current color, emit when slider dragging starts
(sliderChange)	SliderChangeEvent	Slider name and its value, emit when user changes color through slider
(sliderDragEnd)	SliderChangeEvent	Slider name and current color, emit when slider dragging ends
(colorSelect)	string	Color select canceled, emit when Cancel button is pressed
(colorSelectCancel)	void	Selected color value, emit when OK button pressed or user clicks outside (if saveClickOutside is true)
(nxtColorChange)	string	Changed color value, emit when color changes
(cmykColorChange)	string	Outputs the color as CMYK string if CMYK is enabled
(presetColorsChange)	string[]	Preset colors, emit when preset color is added / removed