ngx-colors
#455a64
Slide-In animations & Default palette
#c2185b
Popup animations & Custom palette

Overview

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.

It 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.

Install & Import

Npm

Install dependency
npm install @angular/animations

Install ngx-colors
npm install ngx-colors

Import

import { NgxColorsModule } from 'ngx-colors';
  
            @NgModule({
              ...
              imports: [
                ...
                NgxColorsModule
              ]
            })

Basic usage

Getting and setting a color

The ngx-colors-trigger directive supports 2-way binding using ngModel property.
<ngx-colors ngx-colors-trigger [(ngModel)]="leftColor"></ngx-colors>
<mat-form-field>
    <input matInput [(ngModel)]="leftColor">
</mat-form-field>

Or it can be used it inside a ReactiveForm
Value: #c2185b
<form class="example-form">
    <ngx-colors ngx-colors-trigger style="display: inline-block; margin:5px;" [formControl]="colorFormControl"></ngx-colors>
</form>
Value: {{ colorFormControl.value }}


Detecting changes

For this component the "change" and "ngModelChange" events are interchangeable, and called every time the component's value changes. Instead the "input" event is called only when the user manually interacts with the component.
The "slider" event will fire every time the user moves a slider in the color picker

Try it out here:

#0070f3
2
change: #0070f3
1
change: