Color picker (ngx-color-palette)

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.

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;
}

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.