ngx-color-picker

What is ngx-color-picker?

ngx-color-picker is an Angular component library that provides a color picker widget. It allows users to select colors through a user-friendly interface, supporting various color formats such as HEX, RGB, and HSL. The package is highly customizable and can be integrated easily into Angular applications.

What are ngx-color-picker's main functionalities?

Basic Color Picker

This feature allows you to add a basic color picker to your Angular application. The selected color is bound to the 'color' variable in your component.

<color-picker [(color)]="color"></color-picker>

Preset Colors

This feature allows you to provide a set of preset colors that users can choose from. The 'presetColors' variable should be an array of color strings.

<color-picker [(color)]="color" [presetColors]="presetColors"></color-picker>

Output Events

This feature allows you to handle color change events. The 'onColorChange' method will be called whenever the user selects a new color.

<color-picker [(color)]="color" (colorChange)="onColorChange($event)"></color-picker>

Custom Styles

This feature allows you to customize the dimensions of the color picker. The 'cpWidth' and 'cpHeight' properties set the width and height of the color picker, respectively.

<color-picker [(color)]="color" [cpWidth]="200" [cpHeight]="200"></color-picker>

Other packages similar to ngx-color-picker

ngx-color

ngx-color is another Angular color picker library that offers a variety of color picker components inspired by popular color pickers like Photoshop and Sketch. It provides a more diverse set of color picker styles compared to ngx-color-picker.

angular2-color-picker

angular2-color-picker is a simple and lightweight color picker for Angular applications. It offers basic color picking functionalities and is easy to integrate, but it lacks some of the advanced customization options available in ngx-color-picker.

ng2-color-picker

ng2-color-picker is an Angular 2+ color picker component that provides a straightforward and easy-to-use interface for color selection. It is similar to ngx-color-picker in terms of basic functionality but may not offer as many customization options.

README

Angular Color Picker

This is a simple color picker based on the cool angular2-color-picker by Alberplz.

This documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.

Quick links

Example application | StackBlitz example

Building the library

npm install
npm run build

Running the example

npm install
npm run start

Installing and usage

npm install ngx-color-picker --save

Load the module for your app:

import { ColorPickerModule } from 'ngx-color-picker';

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

Use it in your HTML template:

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

[colorPicker]                // The color to show in the color picker dialog.

[cpWidth]                    // Use this option to set color picker dialog width ('230px').
[cpHeight]                   // Use this option to force color picker dialog height ('auto').

[cpToggle]                   // Sets the default open / close state of the color picker (false).
[cpDisabled]                 // Disables opening of the color picker dialog via toggle / events.

[cpColorMode]                // Dialog color mode: 'color', 'grayscale', 'presets' ('color').

[cpCmykEnabled]              // Enables CMYK input format and color change event (false).

[cpOutputFormat]             // Output color format: 'auto', 'hex', 'rgba', 'hsla' ('auto').
[cpAlphaChannel]             // Alpha mode: 'enabled', 'disabled', 'always', 'forced' ('enabled').

[cpFallbackColor]            // Used when the color is not well-formed or is undefined ('#000').

[cpPosition]                 // Dialog position: 'auto', 'top', 'bottom', 'left', 'right',
                             //  'top-left', 'top-right', 'bottom-left', 'bottom-right' ('auto').
[cpPositionOffset]           // Dialog offset percentage relative to the directive element (0%).
[cpPositionRelativeToArrow]  // Dialog position is calculated relative to dialog arrow (false).

[cpPresetLabel]              // Label text for the preset colors if any provided ('Preset colors').
[cpPresetColors]             // Array of preset colors to show in the color picker dialog ([]).

[cpDisableInput]             // Disables / hides the color input field from the dialog (false).

[cpDialogDisplay]            // Dialog positioning mode: 'popup', 'inline' ('popup').
                             //   popup: dialog is shown as popup (fixed positioning).
                             //   inline: dialog is shown permanently (static positioning).

[cpIgnoredElements]          // Array of HTML elements that will be ignored when clicked ([]).

[cpSaveClickOutside]         // Save currently selected color when user clicks outside (true).
[cpCloseClickOutside]        // Close the color picker dialog when user clicks outside (true).

[cpOKButton]                 // Show an OK / Apply button which saves the color (false).
[cpOKButtonText]             // Button label text shown inside the OK / Apply button ('OK').
[cpOKButtonClass]            // Additional class for customizing the OK / Apply button ('').

[cpCancelButton]             // Show a Cancel / Reset button which resets the color (false).
[cpCancelButtonText]         // Button label text shown inside the Cancel / Reset button ('Cancel').
[cpCancelButtonClass]        // Additional class for customizing the Cancel / Reset button ('').

[cpAddColorButton]           // Show an Add Color button which add the color into preset (false).
[cpAddColorButtonText]       // Button label text shown inside the Add Color button ('Add color').
[cpAddColorButtonClass]      // Additional class for customizing the Add Color button ('').

[cpRemoveColorButtonClass]   // Additional class for customizing the Remove Color button ('').

[cpPresetColorsClass]        // Additional class for customizing the Preset Colors container ('').

[cpMaxPresetColorsLength]    // Use this option to set the max colors allowed in presets (null).

[cpPresetEmptyMessage]       // Message for empty colors if any provided used ('No colors added').
[cpPresetEmptyMessageClass]  // Additional class for customizing the empty colors message ('').

[cpUseRootViewContainer]     // Create dialog component in the root view container (false).
                             // Note: The root component needs to have public viewContainerRef.

(colorPickerOpen)            // Current color value, send when dialog is opened (value: string).
(colorPickerClose)           // Current color value, send when dialog is closed (value: string).

(colorPickerChange)          // Changed color value, send when color is changed (value: string).
(colorPickerCancel)          // Color select canceled, send when Cancel button is pressed (void).
(colorPickerSelect)          // Selected color value, send when OK button is pressed (value: string).

(cpToggleChange)             // Status of the dialog, send when dialog is opened / closed (open: boolean).

(cpInputChange)              // Input name and its value, send when user changes color through inputs
                             // ({input: string, value: number | string, color: string})

(cpSliderChange)             // Slider name and its value, send when user changes color through slider
                             //   ({slider: string, value: number | string, color: string})
(cpSliderDragStart)          // Slider name and current color, send when slider dragging starts (mousedown,touchstart)
                             //   ({slider: string, color: string})
(cpSliderDragEnd)            // Slider name and current color, send when slider dragging ends (mouseup,touchend)
                             //   ({slider: string, color: string})

(cpCmykColorChange)          // Outputs the color as CMYK string if CMYK is enabled (value: string).

(cpPresetColorsChange)       // Preset colors, send when 'Add Color' button is pressed (value: array).

Available control / helper functions (provided by the directive):

openDialog()                 // Opens the color picker dialog if not already open.
closeDialog()                // Closes the color picker dialog if not already closed.