Angular PrimeNG Form ColorPicker Formats组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型设计，该框架可用于制作响应式网站，非常方便。这篇文章将向我们展示如何使用Angular PrimeNG Form ColorPicker Formats组件。

ColorPicker组件是用来接受用户的颜色输入。它可以给出三种格式的值。格式属性用于告诉人们使用哪种格式来选择颜色。例如，RGB、HSB和hex。

Angular PrimeNG Form ColorPicker Formats 属性：

• 格式。它用于告诉颜色选择器将输出的格式，接受的值是 “hsb”、”rgb “和 “hex”。

语法:

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

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

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

ng new appname

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

cd appname

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

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

Project Structure:

Project Structure

例子1：下面的例子说明了如何使用ColorPicker组件的RGB格式。

• app.component.html:

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form 
        ColorPicker Formats Component
    </h4>
  
    <h5>Formate: rgb</h5>
    <p-colorPicker 
        [(ngModel)]="color2" 
        format="rgb">
    </p-colorPicker>
</div>

• app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    color2?: string;
}

• 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 { ColorPickerModule } from "primeng/colorpicker";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

例子2：这是另一个代码例子，显示了使用HSb格式的颜色与取色器组件的情况。

• app.component.html:

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form 
        ColorPicker Formats Component
    </h4>
    <h5>Formate: hsb</h5>
  
    <p-colorPicker 
        [(ngModel)]="color2" 
        format="hsb">
    </p-colorPicker>
</div>

• app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html"
})
export class AppComponent {
    color2?: string;
}

• 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 { ColorPickerModule } from "primeng/colorpicker";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出: