ct-angular2-color-picker
v1.0.5
Published
Angular 2 Color Picker Directive/Component with no dependencies required.
Downloads
2
Readme
ct-angular2-color-picker
Angular 2 Color Picker Directive/Component with no dependencies required.
*** Note ***
Fork of angular2-color-picker https://github.com/Alberplz/angular-colorpicker-directive
Demo page
http://alberplz.github.io/angular2-color-picker/index.html
Installation
npm install ct-angular2-color-picker
SystemJS configuration
https://github.com/bbbenja/angular2-color-picker/blob/master/examples/systemjs.config.js
// map tells the System loader where to look for things
var map = {
'app': '', // 'dist'
'rxjs': '/node_modules/rxjs',
'@angular': '/node_modules/@angular',
'ct-angular2-color-picker': '/node_modules/ct-angular2-color-picker' <-- Add this line
};
Usage
- Use it in your HTML elements, for example:
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>
- Add ColorPickerService in your main.ts:
import {ColorPickerService} from 'ct-angular2-color-picker/component'
bootstrap(AppComponent, [ColorPickerService]);
- Include ColorPickerDirective in your component, and set color the variable:
import {Component} from '@angular/core';
import {ColorPickerDirective} from 'ct-angular2-color-picker/component'
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [ColorPickerDirective]
})
export class AppComponent {
private color: string = "#127bdc";
}
#Options Default option is the first item.
[cpOutputFormat]="'hex', 'rgba', 'hsla'"
[cpPosition]="'right', 'left', 'top', 'bottom'"
[cpPositionOffset]="'0%'"
[cpPositionRelativeToArrow]="false, true"
[cpCancelButton]="false, true"
[cpHeight]="'290px'"
[cpCancelButtonClass]="'cp-cancel-button-class'"
[cpCancelButtonText]="'Cancel'"
#Events / Outputs
ColorPicker directive also has an output event, colorPickerChange
that emits a string value of the currently selected color, whenever a change to that value is made.
(colorPickerChange)="yourMethod($event)"
Where $event
holds the new string color value.
#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
#For previous version of Angular: https://github.com/Alberplz/angular-colorpicker-directive