You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

github.com/andymeps/ng2-color-picker

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/andymeps/ng2-color-picker

v1.3.2
Source
Go
Version published
Created
Source

npm version MIT Licence Dependency Status Build Status

NPM

ng2-color-picker

Simple color picker for Angular 2

Screenshot open

Dependencies

The module relies on ngx-bootstrap for dropdown functionality.

Installation

To include in your project install via NPM with:

npm install --save ng2-color-picker

You will then need to include the module to your app.module.ts:

import { ColorPickerModule } from 'ng2-color-picker';

// ...

@NgModule({
    imports: [
        ColorPickerModule
    ]
})
///...

Finally, include the component in your HTML as per the next section.

HTML Component Markup

Once the module is installed, you will need to add HTML markup to include the picker in a component. The minimum requirement is an [(ngModel)] attribute, which should provide a string representation of a color, and an [availableColors] attribute, which should provide a string[] of available colors.

<color-picker
    [(ngModel)]="color"
    [availableColors]="availableColors">
</color-picker>

It is possible to configure ng2-color-picker by providing a configuration object to the [pickerConfig] attribute (see the next section for more details on this object):

<color-picker
    [(ngModel)]="color"
    [availableColors]="availableColors"
    [pickerConfig]="pickerOptions">
</color-picker>

Configuration

ng2-color-picker exposes an interface to provide an indication of valid configuration properties, this can be referenced as a type for your configuration object by importing it:

import { IColorPickerConfiguration } from 'ng2-color-picker';

Which can then be used as the configuration object type in your component:

public pickerOptions: IColorPickerConfiguration;

Current list of configuration options, types and default values:

PropertyTypeDefaultDescription.
widthnumber25Width of the picker control.
heightnumber25Height of the picker control.
borderRadiusnumber4Radius of the picker control border.

FAQs

Package last updated on 19 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts