Showing posts with label ngx-color-picker. Show all posts
Showing posts with label ngx-color-picker. Show all posts
ngx-color-picker

ngx-color-picker

November 02, 2017
This is an AOT compatible version with some additional features of the cool angular2-color-picker by Alberplz.
In future this library might merge with the angular2-color-picker or continue live as a separate library.
See a live example application here.

Library building

 npm install  
 npm run build  
 npm run inline  

Library development

 npm link  
 cd example  
 npm link ngx-color-picker  

Running the example

 cd example  
 npm install  
 npm start  
 (or 'npm run start:sjs' for using SystemJS)  

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).  
 [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 ([]).  
 [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 ('').  
 [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).  
 [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).  
 (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})  

Note: Special thanks to ZEF Oy
Contact: info@zef.fi
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.