Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
ngx-color-picker
Advanced tools
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.
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>
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 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 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.
This is a simple color picker based on the cool angular2-color-picker by Alberplz.
This documentation is for the latest 5.x.x version which requires Angular 5. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.
See a live example application here.
npm install
npm start
cd example
npm install
npm start
npm link
cd example
npm link ngx-color-picker
npm install ngx-color-picker --save
import { ColorPickerModule } from 'ngx-color-picker';
@NgModule({
...
imports: [
...
ColorPickerModule
]
...
})
<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 ([]).
[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).
[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 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.
(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})
FAQs
Color picker widget for Angular
The npm package ngx-color-picker receives a total of 101,134 weekly downloads. As such, ngx-color-picker popularity was classified as popular.
We found that ngx-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.