Angular PrimeNG Chip属性

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。在这篇文章中，我们将看到Angular PrimeNG中的Chip属性。

芯片组件使用标签、图标和图像代表实体。芯片可以用来从用户那里获取信息，过滤内容，或触发一些行动。

Angular PrimeNG芯片属性：

• label。它定义了要显示的芯片的文本。它接受字符串值，默认值为空。
• icon。它定义了要显示的芯片的图标。它接受字符串值，默认值为空。
• image。它定义了要显示的芯片的图像。它接受字符串值，默认值为空。
• removable。它定义了是否在芯片上显示一个移除图标。它接受一个布尔值，默认情况下，它是假的。
• style。它用于定义组件的内联风格。它接受字符串值，默认值为空。
• styleClass。它用于定义组件的风格类。它接受字符串值，默认值为空。
• removeIcon: 它用于定义哪个项目作为移除图标显示。它接受字符串值，默认值是 “π pi-times-circle”。

语法:

<p-chip label="..." icon="..."></p-chip>

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

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

ng new newapp

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

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

例子1：这是一个基本的例子，说明了Angular PrimeNG中芯片属性的使用。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Properties</h3>
  
<div>
    <p-chip 
        label="Basic Chip with just text" 
        class="mr-2">
    </p-chip>
    <p-chip 
        label="Text with a check icon" 
        icon="pi pi-check" 
        class="mr-2">
    </p-chip>
</div>
  
<div class="mt-2">
    <p-chip 
        label="Text with a hashtag icon" 
        icon="pi pi-hashtag">
    </p-chip>
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

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

输出:

例子2：这个例子说明了图像的使用和Angular PrimeNG中的芯片组件的样式设计。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Properties</h3>
  
<p-chip label="Basic Chip with just text" 
        class="mr-2">
</p-chip>
  
<p-chip label="Text with an image"
        image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220915000203/download-200x200.png"
        class="mr-2">
</p-chip>
  
<p-chip label="Custom Styled Chip" 
        styleClass="my-chip" 
        icon="pi pi-hashtag">
</p-chip>

import { Component } from '@angular/core';
  
@Component({
    selector:'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

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

p-chip{
    margin-top: 20px;
    display: block;
}
  
.p-chip.my-chip {
    background-color: green;
    color: white;
}

输出: