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

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

1npm install ngx-colors

Load the ngx-colors module in your app module:

1import { NgxColorsModule } from 'ngx-colors';
2
3@NgModule({
4  ...
5  imports: [
6    ...
7    NgxColorsModule
8  ]
9})

Overview and usage

This library is composed of two parts:

1. 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
2. ngx-colors: This component is a premade button that will display the selected color.

Use it in your HTML template with ngModel:

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

Or with Reactive Forms:

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