Package Exports

ngx-colors

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 (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

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

example gif

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:

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>