5 Best angular color picker and how to implement it .?

We have seen color pickers in many applications, including Photoshop, Gimp, and more. We can easily add an angular color picker to our Angular project. There is plenty of third-party libraries to add color picker components in our Angular project. We might want to apply color to any input and drawings in our angular project.

In this tutorial, we will disucss some of best Angular color picker libraries. We’ll demonstrate two example of Angular color picker using ngx color picker and angular material color picker. So let’s get started.

5 Best Angular color picker libraries in Angular.

As we have discussed that there are plenty of third parties libraries to implement Angular color pickers. We’ll list here some, you can select based on your requirement.

Name of librariesDescription
ngx-color-pickerThis is one of the most downloaded color picker libraries and has a size of about 894 kB.
ngx-colorIt has 13 different color pickers, iSketch, Photoshop, Chrome, Twitter, and many more. The size of libraries is 1.92 MB.
mat-color-pickerMatColorPicker is created with Angular Material and CDK. But it hasn’t been updated for more than 4 years.
ngx-colorsA beautiful color picker for angular that lets you choose from a color palette and text input. It has a size of 670 kB.
np-ui-libNative Angular UI Components and Design Framework. It has a size of 3.83 MB.

Setting up and configure Angular color picker project

et first create our Angular color picker project and we have two examples of Angular color picker. Before starting an angular project you need to install nodejs and Angular CLI in your system.

ng new colorPickerApp

Example 1: Angular color picker using ngx-color-picker

We’ll demonstrate Angular color picker using third-party library the ngx-color-picker. Here we first need to install this library in our project by following the command.

npm i ngx-color-picker --save

Here is a screenshot of our first example of Angular color picker using the ngx-color-picker library.

Angular color picker

After installing our ngx-color-picker library and to use this library in our angular project, we need to import ColorPickerModule in our app.module.ts file and let edit the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ColorPickerModule } from 'ngx-color-picker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ColorPickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Implment Angular color picker using ngx color picker

We have an import the ngx-color-picker module in our module. Let’s demonstrate four examples of ngx-color-picker in our Angular project. First, we need a variable that can hold color values and an array containing lists of colors. Here is our example of the ngx-color-picker screenshot.

Angular color picker example

Let’s edit the app.component.ts file and declare color and colors list variables.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'colorPicker';
  color: string = '#2889e9'
  arrayColors: any = {
    color1: '#2883e9',
    color2: '#e920e9',
    color3: 'rgb(255,245,0)',
    color4: 'rgb(236,64,64)',
    color5: 'rgba(45,208,45,1)'
  };
  selectedColor: string = 'color1';
}

Let edit the app.component.html template to demonstrate our four examples on color pickers.

<form action="">
    <div class="form-group">
        <label>Pick or enter color</label>
        <input class="form-control" [(colorPicker)]="color" cpWidth='230px' cpHeight="100px"
            [style.background]="color" />
    </div>

    <div class="form-group">
        <label>Greyscale color mode</label>
        <input class="form-control" [(colorPicker)]="color" [cpColorMode]="'grayscale'" [style.background]="color" />

    </div>
    <div class="form-group">
        <label>Color Output format</label>
        <input class="form-control" [value]="color" [style.background]="color" [cpOutputFormat]="'rgba'"
            [(colorPicker)]="color" />
    </div>
</form>

<div class="colorPaletteContainer">
    <h3>Pick a Color:</h3>
    <span [style.background]="arrayColors[selectedColor]" [cpToggle]="true" [cpDialogDisplay]="'inline'"
        [cpCancelButton]="true" [(colorPicker)]="arrayColors[selectedColor]"></span>
    <div [style.background]="arrayColors['color1']" (click)="selectedColor='color1'"></div>
    <div [style.background]="arrayColors['color2']" (click)="selectedColor='color2'"></div>

</div>

<router-outlet></router-outlet>

Note: Here we have used different attributes and events on the color picker.

[cpWidth]: Use this option to set color picker dialog width, not the input box.
[cpHeight]: Use this option to force color picker dialog height (‘auto’).
[cpToggle]: Sets the default open / close state of the color picker (false).
[cpColorMode]: Dialog color mode: ‘color’, ‘grayscale’, ‘presets’ (‘color’).
(colorPickerChange) // Changed color value, send when color is changed (value: string).
(colorPickerCancel) // Color select canceled, send when Cancel button is pressed (void).

Here we have listed a few ngx-color-picker attributes and events, you can check more detailed information on its official npmjs packages.

Example 2: Angular color picker using ngx-colors

We’ll demonstrate Angular color picker using third-party library ngx-colors. Here we first need to install this library in our project by following the command.

npm i ngx-colors --save

A beautiful color picker for angular that lets you choose from a color palette, using sliders (Hue, Lightness, Alpha sliders) or through text input(hex, rgba, hsla). We can easily change between different color modes. Here is a screenshot of our first example of Angular color picker using the ngx-colors library.

Angular color picker example

After installing our ngx-colors library and to use this library in our angular project, we need to import NgxColorsModule in our app.module.ts file and let edit the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxColorsModule } from 'ngx-colors';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgxColorsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let used ngx-color component in our app.component.html template.

<form action="">
 <div class="form-group">
   <label>Pick or enter color</label>
   <ngx-colors ngx-colors-trigger [(ngModel)]="color"></ngx-colors>
   <ngx-colors ngx-colors-trigger style="display: inline-block; margin:5px;">
   </ngx-colors>
  </div>
</form>


Conclusion
We have completed two examples of how to add an Angular color picker to our Angular application using two different third-party libraries ngx-color-picker and ngx-colors library.

Related posts

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top