kfrederix / ngx-colors

Simple yet elegant Material color picker for Angular

ngx-colors

A beautiful color picker for angular that let you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla)

Demo and documentation

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

Preview

Installation

Npm

npm install @angular/animations

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>

Or with Reactive Forms:

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