ngx-color-picker is a component of the Pure Angular color picker library for Angular 5+ applications.
Describe
- It is an angular color picker
- Compatible with Angular 5+ versions
- No external dependency
- easy to configure
- easy to use
Tested with
- Firefox (newer)
- Chrome (latest)
- Chromium (latest)
- Edge
- IE11
Quick Animated Gradient Border In Pure CSS
How to make use of it:
Installation / Getting Started
npm install @iplab/ngx-color-picker --save
Use the following snippet inside your app module:
import { ColorPickerModule } from '@iplab/ngx-color-picker';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
...
@NgModule({
imports: [
BrowserModule,
ColorPickerModule,
BrowserAnimationsModule // or use NoopAnimationsModule
],
bootstrap: [AppComponent]
})
export class AppModule {}Use the following snippet inside your template:
<chrome-picker [(color)]="#fff"></chrome-picker>
ColorPickerControl methods
| Property | Type | Description |
|---|---|---|
| setValueFrom | Function | Set value from Color, Rgba, Hsla, Hsva or ColorString |
| value | Getter.value | get value as a Color object |
| reset | Function | reset value to initial state |
| valueChanges | Observable | Used to observe component value changes |
| isAlphaChannelEnabled | Function | return is alpha changel enabled |
| showAlphaChannel | Function | show alpha channel |
| hideAlphaChannel | Function | hide alpha channel |
| alphaChannelVisibilityChanges | BehaviorSubject | Used to observe alpha channel changes |
| setColorPresets | Function | define color preset list |
| presets | Getter.presets | get color presets |
| hasPresets | Function | return status of predefined color presets |
| showPresets | Function | show predefined color presets |
| hidePresets | Function | hide predefined color presets |
| presetsVisibilityChanges | BehaviorSubject | Used to observe color preset visibility |
Color methods
| Property | Type | Description |
|---|---|---|
| Color.from | static method | create a new Color object from Color, Rgba, Hsla, Hsva or ColorString |
| clone | Function | create a new Color object |
| setFromString | Function | change the value by providing the string |
| setHsva | Function | change the value by providing HSV values |
| setRgba | Function | change the value by providing RGB values |
| setHsla | Function | change the value by providing HSL values |
| toHexString | Function | convert Color object to hex string |
| toRgbString | Function | convert Color object to rgb string |
| toRgbaString | Function | convert Color object to rgba string |
| toHslString | Function | convert Color object to hsl string |
| toHslaString | Function | convert Color object to hsla string |
| toHsvString | Function | convert Color object to hsv string |
| toHsvaString | Function | convert Color object to hsva string |
| toCmykString | Function | convert Color object to cmyk string |
| getHsva | Function | return Hsva object |
| getRgba | Function | return Rgba object |
| getHsla | Function | return Hsla object |
| getCmyk | Function | return Cmyk object |
Configurable Color Picker, ngx-color-picker Plugin/Github, jquery color picker example
See Demo And Download
Official Website(pIvan): Click Here
This superior jQuery/javascript plugin is developed by pIvan. For extra Advanced Usage, please go to the official website.
