Angular PrimeNG Form ColorPicker事件组件

Angular PrimeNG是一个用于Angular应用程序的前端UI组件库。它是由PrimeTek开发和维护的。PrimeNG帮助开发者使用预先构建的组件和主题在更短的时间内创建令人惊叹的网页界面。在这篇文章中，我们将讨论Angular PrimeNG表格ColorPicker事件组件。

颜色选择器组件是用来从用户那里获取颜色输入的。它提供了一个漂亮的用户界面，用户可以选择颜色，并且该颜色可以被我们的应用程序以不同的颜色格式访问。

Angular PrimeNG Form ColorPicker事件：

onChange。它接受回调，当一个颜色被选中时，回调将被调用。
onShow。它接受回调，当挑选器弹出时，回调将被调用。
onHide。它接受回调，当选取器的弹出窗口被隐藏时，回调将被调用。

语法:

<p-colorPicker 
    [(ngModel)]="..."
    format="hex | rgb | hsb"
    (event-name)="callback">
</p-colorPicker>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步：在你给定的目录中安装PrimeNG。

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Form ColorPicker事件组件

Project Structure

例子1：在这个例子中，我们使用了颜色选择器的onChange事件，每当颜色的值发生变化时，就显示一个祝酒词。

app.component.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:

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:

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 { }

输出:

Angular PrimeNG Form ColorPicker事件组件

例子2：在这个例子中，我们使用了颜色选择器的onShow和onHide事件，每当选择器的弹出窗口显示或隐藏时，都会显示一个祝酒词。

app.component.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:

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:

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 { }

输出:

Angular PrimeNG Form ColorPicker事件组件