Skip to content

KroneCorylus/ngx-colors

Repository files navigation

size download

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:

  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:
<ngx-colors 
  ngx-colors-trigger 
  [(ngModel)]="color"
></ngx-colors>

You can select just one format:

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

Or you can choise some formats

<ngx-colors 
  ngx-colors-trigger 
  [(ngModel)]="color"
  [formats]="['hex','cmyk']"
></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>