JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 10
  • Score
    100M100P100Q59504F
  • License MIT

Our tool offers a vast palette of hues at your fingertips. Easily select the perfect color for your designs with precise controls and intuitive interface.

Package Exports

  • ngx-prime-color-picker
  • ngx-prime-color-picker/package.json

Readme

Welcome to ngx-prime-color-picker!

Our tool offers a vast palette of hues at your fingertips. Easily select the perfect color for your designs with precise controls and intuitive interface.

This package is designed to work exclusively with Angular standalone components. Please ensure your project is configured accordingly.

npm i ngx-prime-color-picker

ngx-prime-color-picker npm version

Precise color selection, effortlessly.

Our tool offers a vast palette of hues at your fingertips. Easily select the perfect color for your designs with precise controls and intuitive interface.



Import

Import the module on your app.module.ts file as follow.

<ngx-prime-color-picker
  [color]="color"
  (getCurrentColorObject)="currentColorObject($event)"

  [showConversionTable]="true"
  [showLightness]="true"
  [showColorPalette]="true"
  [showGradient]="true"
  [showSaturation]="true"
></ngx-prime-color-picker>

On Your component file (TS)

import { NgxPrimeColorPickerComponent, COLOROBJECT } from "ngx-prime-color-picker";

@Component({
  selector: '...',
  standalone: true,
  imports: [NgxPrimeColorPickerComponent],
  templateUrl: '...',
  styleUrl: '...'
})
export class YourComponent {

  public color = '#ff9800';

  public currentColorObject(event: COLOROBJECT) {
    console.log('event: ', event);
  }
  // Sample output
  // {
  //   "red": 234,
  //   "green": 155,
  //   "blue": 36,
  //   "hue": 36,
  //   "sat": 0.82,
  //   "lightness": 0.53,
  //   "whiteness": 0.14,
  //   "blackness": 0.08,
  //   "cyan": 0,
  //   "magenta": 0.34,
  //   "yellow": 0.85,
  //   "black": 0.08,
  //   "ncol": "R60",
  //   "opacity": 1,
  //   "valid": true,
  //   "hex": "#ea9b24"
  // }

}
Bind Variable Usage Default
color Current color / Choosed Color '#ff0000'
showConversionTable Enables Color conversion table false
showColorPalette Enables Exteneded Color Palettes false
showLightness Enables Lightness slider false
showSaturation Enables Saturation slider false

Bind Method Usage
getCurrentColorObject($event) Get changed color object

Code integration

To use this package as a service npm i ngx-prime-color-picker install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-prime-color-picker on root folder or else it will throw error.