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