Angular PrimeNG Form ColorPicker Properties Component

Angular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the Angular PrimeNG Form ColorPicker Properties Component.

The Color Picker Component is used to take the input of color from the user. It provides a beautiful UI where users can choose the color and that color can be accessed by our application in different color formats.

Angular PrimeNG Form ColorPicker Properties:

• style: This is the inline style of the component. It accepts string values and the default value is null.
• styleClass: This is the style class of the component. It accepts string values and the default value is null.
• inline: This is a boolean property that defines if the color picker will be shown inline.
• format: This property defines the color format to use in value binding. The supported formats are “hex”, “rgb” and “hsb”.
• appendTo: It specifies the target element to which the picker overlay should be attached. Accepted values are “body” or a local ng-template variable of another element. 
• tabindex: It is the index of the element in tabbing order. It accepts number values and the default value is null.
• disabled: It is a boolean property that disables the color picker when present.
• inputId: It is the id of the focused input to match the label defined for the dropdown. It accepts string values and the default value is null.
• baseZIndex: It is the base z-index to be used in layering. The default value is 0.
• autoZIndex: It is a boolean property that tells if the library should automatically manage the layering.
• showTransitionOptions: It accepts the transition options for the show animation. The default value is “.12s cubic-bezier(0, 0, 0.2, 1)”.
• hideTransitionOptions: It accepts the transition options for the hide animation. The default value is “.1s linear”.

Syntax:

<p-colorPicker 
    [(ngModel)]="..."
    format="hex | rgb | hsb"
    [hideTransitionOptions]="..."
    [showTransitionOptions]="...">
</p-colorPicker>

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After completing the above steps, the structure will look like the following.

Project Structure

Example 1: In this example, we used the inline property of the color picker to show it in inline mode rather than the default popup mode.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form ColorPicker <br>
    Properties Component
</h4>

<h3>Inline ColorPicker</h3>
<p-colorPicker
    [inline]="true"
    [(ngModel)]="selectedColor2">
</p-colorPicker>

<h3>Popup ColorPicker</h3>
<p-colorPicker
    [(ngModel)]="selectedColor1">
</p-colorPicker>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
    providers: [MessageService]
})
export class AppComponent {
    constructor(private messageService: MessageService) { }
    selectedColor1?: String;
    selectedColor2?: String;
}

• app.module.ts:

HTML

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ColorPickerModule } from 'primeng/colorpicker';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ColorPickerModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we used the showTransitionOptions and hideTransitionOptions properties to set the popup show and hide transitions to 1 second with linear progression.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h4>
      Angular PrimeNG Form ColorPicker <br>
    Properties Component
</h4>

<p-colorPicker
    [showTransitionOptions]="'1s linear'"
    [hideTransitionOptions]="'1s linear'"
    [(ngModel)]="selectedColor">
</p-colorPicker>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
    providers: [MessageService]
})
export class AppComponent {
    constructor(private messageService: MessageService) { }
    selectedColor?: String;
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ColorPickerModule } from 'primeng/colorpicker';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ColorPickerModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/colorpicker