Angular PrimeNG Form ColorPicker Events Component
Last Updated :
18 Oct, 2022
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.
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 >
|
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'
});
}
}
|
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.
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 >
|
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'
});
}
}
|
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
Share your thoughts in the comments
Please Login to comment...