ngx-colors | Angular component

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

change: #0070f3

change:

HTML

import { animate, style, transition, trigger } from "@angular/animations";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-detect-change-example",
  templateUrl: "./detect-change-example.component.html",
  animations: [
    trigger("inOutAnimation", [
      transition(":enter", [
        style({ background: "red" }),
        animate("1s ease-out", style({})),
      ]),
    ]),
  ],
  styleUrls: ["./detect-change-example.style.scss"],
})
export class DetectChangeExampleComponent {
  constructor() {}

  color = "#0070f3";
  colorIndex = 0;
  colors = ["#0070f3", "#00796B", "#D81B60", "#7986CB"];

  logs: Array<Array<any>> = [];

  public rotateColor(): void {
    this.colorIndex = (this.colorIndex + 1) % this.colors.length;
    this.color = this.colors[this.colorIndex];
  }

  public logEvent(event, trigger) {
    this.logs.unshift([this.logs.length + 1, trigger, event]);
  }
}