ngx-color-selector v0.1.9

ngx-color-selector

UPDATED TO ANGULAR 10/11

FORKED FROM https://github.com/bytelabsco/ngx-color-selector

ngx-color-selector provides a simple interface for selecting from a predefined set of colors.

Demo

Clone the repository and run

npm install    
npm run playground

then navigate in a browser to

http://localhost:3000

Installation

npm install --save ngx-color-selector

Getting Started

Import the BytelabsColorSelectorModule in your application module:

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

// ... Other imports

import { BytelabsColorSelectorModule } from 'sngx-color-selector';

@NgModule({
	imports: [
	// ...
	BytelabsColorSelectorModule
	],
	/...
})
export class AppModule {}

In your component, set up a variable to store your color:

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

import { IColor } from 'ngx-color-selector';

@Component({

selector: 'app-root', templateUrl: './app.component.html', styleUrls: './app.component.css' }) export class AppComponent {

public currentColor: IColor = { hex: "#000" } }

In your template, use the component:

<bytelabs-color-selector [(color)]="currentColor"></bytelabs-color-selector>

Options

The following options are defined in IColorSelectorConfig and a basic implementation is provided in ColorSelectorConfig using reasonable defaults from the constant COLOR_SELECTOR_CONFIG_DEFAULTS. Those can all be found in the color-selector-config.ts file.

PaletteDirection Enum

Rows,					// 0
Columns					// 1

PalettePosition Enum

TopLeft,				// 0
TopRight,				// 1
BottomLeft;				// 2
BottomRight				// 3

Overriding Defaults

In your component you can create a variable to hold your custom options, or you can provide them directly to the component in your template:

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

import { IColorSelectorConfig, IColor, PalettePosition } from 'ngx-color-selector';

@Component({

selector: 'app-root', templateUrl: './app.component.html',s styleUrls: './app.component.css' }) export class AppComponent {

	// You can just provide an object containing the options you want to override

public colorSelectorOptions : IColorSelectorConfig = { position: PalettePosition.BottomLeft };

public currentColor: IColor = { hex: "#000" } }

In your template, pass your option overrides with the component:

<bytelabs-color-selector [(color)]="currentColor" [options]="colorSelectorOptions" ></bytelabs-color-selector>

Or just provide your overrides in the template:

<bytelabs-color-selector [(color)]="currentColor" [options]="{itemsPer: 5}" ></bytelabs-color-selector>

Credits

jvandemo/generator-angular2-library for their excellent Angular2 Library Yeoman Generator

HTMLColorCodes.com for the pre-made color charts.

Shout-out to scoutzfiction

LICENSE

This project is licensed under the MIT license. Se the LICENSE for more info.