DEV Community

loading...
Cover image for Angular ColorPicker

Angular ColorPicker

primetek profile image PrimeTek ・1 min read

Angular ColorPicker is an input component to select a color.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {ColorPickerModule} from 'primeng/colorpicker';
Enter fullscreen mode Exit fullscreen mode

Getting Started

ColorPicker uses ngModel directive to bind a value.

<p-colorPicker [(ngModel)]="color"></p-colorPicker>
Enter fullscreen mode Exit fullscreen mode
export class MyComponent {

    color: string;

}
Enter fullscreen mode Exit fullscreen mode

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.

<p-colorPicker [(ngModel)]="color1"></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="color3" format="hsb"></p-colorPicker>
Enter fullscreen mode Exit fullscreen mode
export class MyComponent {

    color1: string;

    color2: any = {
        r: 100, g: 130, b: 150
    };

    color3: any = {
        h: 100, s: 50, b: 50
    };

}
Enter fullscreen mode Exit fullscreen mode

Overlay and Inline

ColorPicker can be displayed as inline or as an overlay (default) using the "inline" property.

<p-colorPicker [(ngModel)]="color1" ></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" [inline]="true"></p-colorPicker>
Enter fullscreen mode Exit fullscreen mode

Model Driven Forms

Colorpicker can be used in a model driven form as well.

<p-colorPicker formControlName="color"></p-colorPicker>
Enter fullscreen mode Exit fullscreen mode

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-colorPicker [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" formControlName="color"></p-colorPicker>
Enter fullscreen mode Exit fullscreen mode

Theming

ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG ColorPicker showcase for demos and documentation.

Discussion (0)

pic
Editor guide