Angular PrimeNG Form ColorPicker Animation Configuration 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 Animation Configuration Component.

The ColorPicker 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. The Transition of the show and hide animations of the popup can be customized using the showTransitionOptions and hideTransitionOptions properties.

Syntax:

<p-colorPicker 
    [(ngModel)]="..."
    [hideTransitionOptions]="..."
    [showTransitionOptions]="...">
</p-colorPicker>

Angular PrimeNG Form ColorPicker Animation Configuration Properties:

• showTransitionOptions: This property is used to define the transition options for the show animation. It accepts string values and the default value is “.12s cubic-bezier(0, 0, 0.2, 1)”.
• hideTransitionOptions: This property is used to define the transition options for the hide animation. It accepts string values and the default value is “.1s linear”.

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 set the showTransitionOptions to “1s linear” so the popup will take 1 second to open and will animate linearly.

• app.component.html:

HTML

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

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

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    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:

Example 2: In this example, we set the hideTransitionOptions to “3s” so the color picker popup will take 3 seconds to close.

• app.component.html:

HTML

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

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

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    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