ngx-ttitan-color-picker

A simple color picker for angular versions 4 - 6.

Features

• Simple and intuitive interface.
• High performance.
• Minimum of dependencies.
• Color palettes.

##Demo Demo playground

##Installing and usage You can get it on npm. ####NPM $ npm install --save ngx-ttitan-color-picker

Add NgxTTitanColorPickerModule to your application module.

import {NgxTTitanColorPickerModule} from "ngx-ttitan-color-picker";
@NgModule({
  imports: [
    ...,
   NgxTTitanColorPickerModule
  ],
})
export class AppModule { }

Use it in your HTML template:

<lib-ngx-ttitan-color-picker
        [options]="{
          outFormat: 'hex8',
          inputFormat: 'hex8'
        }"
        [color]="color"
        (change)="colorChange($event)"
      ></lib-ngx-ttitan-color-picker>

Component inputs

|Param | Type | Default |Description | | ------------- | ------------------------------ | ------------------------------ |------------------------------ | | color | string | '#ffffff' | Input color. Two-way binding param | | title | string | '' | Picker input label | | options | PickerOptions | '{}' | Picker configuration |

Component options object

|Param | Type | Default |Description | | ------------- | ------------------------------ | ------------------------------ |------------------------------ | | pickerShow | boolean | false | Display color picker on start | | noHide | boolean | false | Do not hide the picker | | debug | boolean | false | Debug output | | outFormat | string | 'hex6' | Output color format | | inputFormat | string | 'hex6' | Expected color format in input field | | availPallets | string[] | ['polaris', 'material'] | List of color palettes. Set empty array for hide color pallets | | customPallets | Palette[] | '[]' | Custom pallets list |

Options palette object

|Param | Type | Default |Description | | ------------- | ------------------------------ | ------------------------------ |------------------------------ | | name | string | false | Display palette name | | id | string | false | Palette id. Must be unique. | | colors | string[] | false | List of colors |

Component outputs

|Param | Type | Description | | ------------- | ------------------------------|------------------------------ | | colorChange | EventEmmiter<string> | Output color |

P.S.:

This is my first public module for Angular. So do not judge strictly ;)

Version changes

v2.0.4

• Fixed rgba && hsla alpha bug

v2.0.5

• Added style for color pallets

v2.0.6

• Fixed hex8 alpha