Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngx-color-palette

manoj10101996115MIT0.0.16TypeScript support: included

Angular library which provides color picker functionality to your angular application.

angular, ngx, color, rgb, red, green, blue, cyan, magenta, yellow, black, hue, saturation, lightness, blackness, rgba, hex, ngx-color-palette, color-converter, ncol, hsl, cymk, hsla, hslToRgb, hueToRgb, hwbToRgb, cmykToRgb, colord, color-palette, color-picker, colors, ncolToRgb, hueToNcol, ncsToRgb, rgbToHsl, rgbToHwb, rgbToCmyk, manoj10101996, uiconfig, colord, colors, color, colour, color-wheel, picker, color-picker

readme

Angular library which provides color picker functionality to your angular application.

A color picker is a graphical user interface widget, usually found within graphics software or online, used to select colors and, in some cases, to create color schemes.

npm i ngx-color-palette

Color picker (ngx-color-palette)

Now position your color picker with additional attribute.

top, bottom, left, right, bottom-left, bottom-right, top-left, top-right, center



Import

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

import { NgxColorPaletteModule } from 'ngx-color-palette';

Then import the module as follow on imports array

NgxColorPaletteModule

Integration

on .html

<ngx-color-palette  [color]="color" [squared]="false" [position]="position" (currentColor)="currentColor($event)"></ngx-color-palette>

on .ts

color = '#FBC02D'; // any color value (name / hex / rgb / hsl)

public currentColor(event: any) { // to receive output
  this.color = event.color;
}
Field type Info
color string Variable to bind
squared boolean Non-rounded egdes
currentColor event / method to get changed / emitted value
postion string place the palette
| top, bottom, left, right, bottom-left, bottom-right, top-left, top-right, center

Code integration

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

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