Angular 2 Color Picker Directive, no dependences required.
TypeScript CSS HTML JavaScript
Clone or download
Alberplz Version 1.3.1
Updated for Angular 2.4
Latest commit 1c29ca1 Jan 31, 2017
Permalink
Failed to load latest commit information.
examples Version 1.3.1 Jan 30, 2017
examples_webpack Version 1.3.1 Jan 30, 2017
lib Version 1.3.1 Jan 30, 2017
src Update to 1.3 Oct 20, 2016
.gitignore 1.2.1 Sep 16, 2016
LICENSE MIT license Apr 8, 2016
_config.yml Link to examples Aug 26, 2016
bower.json 1.2.1 Sep 16, 2016
gulpfile.js 1.2.1 Sep 16, 2016
index.d.ts 1.1.1 Aug 24, 2016
index.html Link to examples Aug 26, 2016
index.js Version 1.3.1 Jan 30, 2017
index.js.map Version 1.3.1 Jan 30, 2017
index.ts 1.1.0 Aug 24, 2016
package.json Version 1.3.1 Jan 30, 2017
readme.md Version 1.3.1 Jan 30, 2017
tsconfig.json 1.2.1 Sep 16, 2016
typings.json Update to 1.3 Oct 20, 2016

readme.md

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:
<input [(colorPicker)]="color" [style.background]="color" [value]="color"/>
  • Or:
<input [colorPicker]="color" (colorPickerChange)="color=$event" [style.background]="color" [value]="color"/>
  • Add ColorPickerModule in your app.module.ts:
import {ColorPickerModule} from 'angular2-color-picker';

@NgModule({
    ...
    imports: [ColorPickerModule]
})
  • Set color the variable. You can use ColorPickerService in your component if you want extra functions.
import {Component} from '@angular/core';
import {ColorPickerService} from 'angular2-color-picker';

@Component({
    selector: 'my-app',
    templateUrl: 'app/demo.html'
})

export class AppComponent {
    private color: string = "#127bdc";
    constructor(private cpService: ColorPickerService) {
    }
}
  • 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.git
npm install
cd agular2-color-picker
npm run build
gulp copylib

#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

#For previous version of Angular: https://github.com/Alberplz/angular-colorpicker-directive