angular2-color-picker
Angular 2 Color Picker Directive/Component with no dependencies required.
This is a Color Picker Directive/Component for Angular 2.
Demo page
http://alberplz.github.io/angular2-color-picker/examples/index.html
Installation
npm i --save angular2-color-picker
Usage
- Use it in your HTML elements, for example:
- Or:
- Add ColorPickerModule in your app.module.ts:
; @
- Set color the variable. You can use ColorPickerService in your component if you want extra functions.
;; @ private color: string = "#127bdc"; { }
- Configure system.config.js
var map = ... 'angular2-color-picker': 'node_modules/angular2-color-picker' ;var packages = ... 'angular2-color-picker': main:'index.js' defaultExtension: 'js' ;
Build
git clone https://github.com/Alberplz/angular2-color-picker.gitnpm installcd agular2-color-pickernpm run build
Options
Default option is the first item.
[cpOutputFormat]="'hex', 'rgba', 'hsla'"[cpPosition]="'right', 'left', 'top', 'bottom'"[cpPositionOffset]="'0%'"[cpPositionRelativeToArrow]="false, true"[cpWidth]="'230px'"[cpHeight]="'auto'"[cpSaveClickOutside]="true, false"[cpOKButton]="false, true"[cpOKButtonClass]="''"[cpOKButtonText]="'OK'"[cpCancelButton]="false, true"[cpCancelButtonClass]="''"[cpCancelButtonText]="'Cancel'"[cpFallbackColor]="'#fff'"[cpPresetLabel]="'Preset colors'"[cpPresetColors]="[]", e.g: "['#fff', '#000']"[cpToggle] = "false, true"[cpIgnoredElements]="[]"[cpDialogDisplay]="'popup,' 'inline'"[cpAlphaChannel]="'hex6', 'hex8', 'disabled'"
Extra content
If you want to change precalculated images for color picker sliders, you can find a little script in this project: https://github.com/Alberplz/angular-colorpicker-directive
Tested in:
- Chrome
- Firefox
- Microsoft Edge
- Opera
- Safari
- Internet Explorer