Angular PrimeNG Form ColorPicker覆盖和内联组件

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

ColorPicker组件用于从用户那里获取颜色的输入。在内嵌式取色器中，颜色选择框显示在用户面前，但在叠加模式中，当用户选择彩色的div时，取色器叠加出现。

Angular PrimeNG Form ColorPicker叠加和内联属性：

inline:如果这个属性被设置为 “true”，取色器将以内联模式显示，否则将以覆盖模式显示。
ngModel。这是一个angular指令，用于将一个值与一个颜色选择器绑定。

语法:

// Inline:
<p-colorPicker [(ngModel)]="..." 
    [inline]="true">
</p-colorPicker>

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

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

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

ng new appname

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

cd appname

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

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

项目结构：项目结构将看起来像如下。

Angular PrimeNG Form ColorPicker覆盖和内联组件

Project Structure

示例1：在下面的代码中，我们将利用上述语法来演示在Inline模式下使用Form ColorPicker。

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 
        Overlay and Inline Component</h4>
    <h5>Inline</h5>
    <p-colorPicker 
        [(ngModel)]="color2" 
        [inline]="true">
    </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 { }

输出:

Angular PrimeNG Form ColorPicker覆盖和内联组件

示例2：在下面的代码中，我们将利用上述语法来演示叠加模式下的表单的使用。

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 
        Overlay and Inline Component</h4>
    <h5>Overlay</h5>
    <p-colorPicker 
        [(ngModel)]="color2">
    </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 { }