Custom color picker

Instructions

Initial setup

1. Download zip and extract
2. change to project repository directory (the directory where you cloned the repo)
3. Execute the command npm install
4. Execute the command ionic cordova prepare
5. Run Ionic:
   • ionic serve to build and run in the browser
   • ionic cordova run android to build and run on an Android device
   • ionic cordova prepare ios to build and then start the appropriate XCode workspace and build/run on an iOS device

Use it in your Ionic project:

<h1 [(colorPicker)]="color" [style.background]="color">Change me!</h1>

[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).

[cpOutputFormat]             // Output color format: 'hex', 'rgba', 'hsla' ('hex').
[cpAlphaChannel]             // Alpha in output value: 'enabled', 'disabled', 'always' ('enabled').
[cpFallbackColor]            // Is used when the color is not well-formed or is undefined ('#000').

[cpPosition]                 // Dialog position: 'right', 'left', 'top', 'bottom' ('right').
[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 ([]).

[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).

[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 ('').
[cpMaxPresetColorsLength]    // Use this option to set the max colors allowed into preset panel (6: number).

[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.

(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).

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

(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
(cpSliderDragEnd)            // Slider name and current color, send when slider dragging ends (mouseup,touchend)
(cpSliderDragStart)          // Slider name and current color, send when slider dragging starts (mousedown,touchstart)
                             //   ({slider: string, value: number|string, color: string})

Plugin link: https://www.npmjs.com/package/ngx-color-picker Documentation for the color picker can be found from here - https://github.com/zefoy/ngx-color-picker/tree/4.x.x

Let me know if it is won't work in your project or create an issue in the above git link.