Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kartik181197/ngx-colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-colors

ngx-colors is a colorpicker component of angular with a material design style, allows users to select a color via text input (hexadecimal, rgba, hsla), choosing a preset color from the palette, or a color picker using the Hue, Lightness, and Alpha sliders.

Demo and documentation

https://ngx-colors.web.app/

Preview

example gif

Installation

Compatibility

Angular	Latest ngx-colors compatible
15	Latest
14	3.1.4
13	3.1.4
12	3.0.5
11	3.0.5
10	3.0.5

Npm

npm install ngx-colors

Load the ngx-colors module in your app module:

import { NgxColorsModule } from 'ngx-colors';

@NgModule({
  ...
  imports: [
    ...
    NgxColorsModule
  ]
})

Overview and usage

This library is composed of two parts:

ngx-colors-trigger: This directive can be applied to any html element turning it into a trigger that when clicked will open the color picker
ngx-colors: This component is a premade button that will display the selected color.

Use it in your HTML template with ngModel:

<ngx-colors ngx-colors-trigger [(ngModel)]="color"></ngx-colors>

Or with Reactive Forms:

<form class="example-form">
  <ngx-colors
    ngx-colors-trigger
    style="display: inline-block; margin:5px;"
    [formControl]="colorFormControl"
  ></ngx-colors>
</form>