Angular PrimeNG芯片组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Chip组件。

芯片组件：它被用来表示图标、标签和图像。

属性：

label : 它用于定义要显示的文本。它是字符串数据类型，默认值为空。
icon : 它用于定义要显示的图标。它是字符串数据类型，默认值为空。
image : 它用于定义要显示的图像。它是字符串数据类型，默认值为空。
removable : 它用于定义是否显示移除图标。它是布尔数据类型，默认值为false。
style : 用于设置组件的内联风格。它是一个对象数据类型，默认值为空。
styleClass : 它用于定义组件的风格类别。它是字符串数据类型，默认值为空。
removeIcon : 它是移除元素的图标。它是字符串数据类型，默认值是pi pi-times-circle。

Styling:

p-chip。它是容器造型元素。
p-chip-image。它是图像模式下的容器元素。
p-chip-text。它为芯片的文本提供样式。
pi-chip-remove-icon。它是删除图标的样式。

Events:

onRemove。它是一个回调函数，当一个芯片被移除时被调用。

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG芯片组件

例子1：这是一个基本的例子，展示了如何使用芯片组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Chip Component</h5>
<div class="p-d-flex p-ai-center">
  <p-chip label="A" styleClass="p-mr-1"></p-chip>
  <p-chip label="B" styleClass="p-mr-1"></p-chip>
  <p-chip label="C" styleClass="p-mr-1"></p-chip>
  <p-chip label="D" styleClass="p-mr-1"></p-chip>
  <p-chip label="E" styleClass="p-mr-1"></p-chip>
  <p-chip label="F"></p-chip>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ChipModule } from "primeng/chip";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ChipModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG芯片组件

例子2：在这个例子中，我们将知道如何在Chip组件中使用可移动和图标属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Chip Component</h5>
<div class="p-d-flex p-ai-center">
    
  <p-chip
    label="A"
    removable="true"
    styleClass="p-mr-1"
    icon="pi pi-angle-double-left">
  </p-chip>
    
  <p-chip
    label="B"
    icon="pi pi-angle-left  "
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="C"
    icon="pi pi-bars"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="D"
    icon="pi pi-angle-right"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="E"
    icon="pi pi-angle-double-right"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ChipModule } from "primeng/chip";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ChipModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG芯片组件