How to Use Color Picker in Angular.

In these article we discuss on Ho easily we have use color picker in our angular project. For that first we need to install one node module called “ngx-color-picker”. Need to run following command

npm i ngx-color-picker --save

After installing we need to import in our app.module.ts file. For that need to write below code.

import { ColorPickerModule } from 'ngx-color-picker';
  imports: [

In HTML we need to write following code to run color picker.

<p [style.color]="color1">
 colorpicker works!
<input [style.background]="color1" [(colorPicker)]="color1 (colorPickerChange)="onChangeColor($event)"/>

In Component we need to define “color1” variable & method “colorPickerChange” when color change.

import { Component, OnInit , ViewContainerRef} from '@angular/core';
import { ColorPickerService, Cmyk } from 'ngx-color-picker';
  selector: 'app-colorpicker',
  templateUrl: './colorpicker.component.html',
  styleUrls: ['./colorpicker.component.css']
export class ColorpickerComponent implements OnInit {

public color1: string = '#2889e9';
      public vcRef: ViewContainerRef, 
      private cpService: ColorPickerService

  ) { }

  ngOnInit() {

  public onChangeColor(color: string): Cmyk {
    const hsva = this.cpService.stringToHsva(color);

    const rgba = this.cpService.hsvaToRgba(hsva);


    return this.cpService.rgbaToCmyk(rgba);

When ever we select the color it change text color also background color of the filed. We have created here one Event onChnageColor we trigger change color also at that time if we want color in RGBA & HSVA that color we can simple convert using colorpicker service that we imported.
You can see output like below.

Spread the love
  • 15