Angular PrimeNG表格Chips造型组件

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

表格Chips组件用于在一个输入字段中输入多个数值。在大多数电子商务网站上都可以看到Chips的使用，如Amazon, Flipkart, Ajio等。

Angular PrimeNG Form Chips造型类：

p-chips。它是容器元素。
p-chips-token: 它是Chips元素容器。
p-chips-token-icon:该类包含了Chips的图标
p-chips-token-label。该类包含了Chips的标签。
p-chips-input-token。该类是输入的容器元素。

语法:

// In app.component.html
<p-chips [(ngModel)]="..." ></p-chips>

// In app.component.css
:host ::ng-deep . **Styling-Class** {
    // CSS Properties
}

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

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

ng new myapp

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

cd myapp

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

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

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

Angular PrimeNG表格Chips造型组件

Project Structure

例子1：在这个例子中，我们使用” p-chips-token-icon “类来增加Chips图标的大小到30px。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form 
    Chips Styling Component</h4>
  
<p-chips
    [(ngModel)]="chipValues">
</p-chips>

app.component.css:

:host ::ng-deep .p-chips-token-icon {
    font-size: 30px;
}

app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    chipValues: 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 { ChipsModule } from 'primeng/chips';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG表格Chips造型组件

例子2：在这个例子中，我们使用 ” p-chips-token-label ” 类来改变字体大小和改变Chips标签的颜色。

app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form 
    Chips Styling Component</h4>
  
<p-chips 
    [(ngModel)]="chipValues">
</p-chips>

app.component.css:

:host ::ng-deep .p-chips-token-label {
    font-size: 25px;
    color: green;
}

app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    chipValues: 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 { ChipsModule } from 'primeng/chips';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG表格Chips造型组件