Angular 2 Color Picker Directive, no dependences required.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for angular2-color-picker-mani in KB



Angular 2 Color Picker Directive/Component with no dependencies required.
This is a Color Picker Directive/Component for Angular 2.


npm i --save angular2-color-picker-mani


  • 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: ```javascript 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';

    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'}

#Options Default option is the first item.

[cpOutputFormat]="'hex', 'rgba', 'hsla'"
[cpPosition]="'right', 'left', 'top', 'bottom'"
[cpPositionRelativeToArrow]="false, true"
[cpSaveClickOutside]="true, false"
[cpOKButton]="false, true"
[cpCancelButton]="false, true"
[cpPresetLabel]="'Preset colors'"
[cpPresetColors]="[]", e.g: "['#fff', '#000']"
[cpToggle] = "false, true"
[cpDialogDisplay]="'popup,' 'inline'"
[cpAlphaChannel]="'hex6', 'hex8', 'disabled'"

#Tested in:

  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
  • Internet Explorer

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from