Angular PrimeNG Form ColorPicker Events 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 Events 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 Events:

• onChange: It accepts the callback which will be invoked when a color is selected.
• onShow: It accepts the callback which will be invoked when the picker popup is shown.
• onHide: It accepts the callback which will be invoked when the picker popup is hidden.

Syntax:

<p-colorPicker 
    [(ngModel)]="..."
    format="hex | rgb | hsb"
    (event-name)="callback">
</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 onChange event of the color picker to show a toast whenever the value of the color changes.

• app.component.html:

HTML

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

<p-colorPicker
    [(ngModel)]="selectedColor"
    (onChange)="pickerChanged()">
</p-colorPicker>
<p-toast></p-toast>

• 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;

    pickerChanged()
    {
        this.messageService.add({
            severity: 'success',
            summary: 'Color Picker Value Changed',
            detail: 'GeeksforGeeks'
        });
    }
}

• 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 { ToastModule } from 'primeng/toast';
import { ColorPickerModule } from 'primeng/colorpicker';

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

export class AppModule { }

Output:

Example 2: In this example, we used the onShow and onHide events of the color picker to show a toast whenever the picker popup is shown or hidden.

• app.component.html:

HTML

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

<p-colorPicker
    [(ngModel)]="selectedColor"
    (onShow)="pickerShow()"
    (onHide)="pickerHide()">
</p-colorPicker>
<p-toast></p-toast>

• 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;

    pickerShow()
    {
        this.messageService.add({
            severity: 'success',
            summary: 'Color Picker Shown',
            detail: 'GeeksforGeeks'
        });
    }

    pickerHide() {
        this.messageService.add({
            severity: 'info',
            summary: 'Color Picker Hidden',
            detail: 'GeeksforGeeks'
        });
    }
}

• 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 { ToastModule } from 'primeng/toast';
import { ColorPickerModule } from 'primeng/colorpicker';

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

export class AppModule { }

Output:

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