Angular PrimeNG Chip模板化

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。

Chip组件被用来表示图标、标签和图像。本文将向我们展示Angular PrimeNG中的Chip Templating。我们通过使用Chip模板来改变预期行为，在这里我们可以定义自定义内容。

方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG Chip Templating。

语法:

<p-chip>
    ...
</p-chip>

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

第1步：要创建一个angular应用程序，你必须通过npm命令在命令行界面安装angular。

npm install -g angular-cli

第2步：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的react项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到如下所示的类似项目结构。用户所做的新组件或代码修改，我们将在源文件夹中完成。

Angular PrimeNGChip模板化

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

例子1：我们正在创建一个显示Angular PrimeNG Chip模板的用户界面。在这里，我们正在创建嵌套的芯片（4个可移动的芯片**在一个芯片内）。

app.component.html

<div style="text-align: center;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Chip Templating</h3>
    <p>Chips inside a Chip</p>
    <br />
    <p-chip [style]=
"{backgroundColor:'green',width:'500px',height:'80px'}">
        <p-chip 
            label="Chip 1" 
            icon="pi pi-hashtag" 
            [removable]="true" 
            styleClass="p-mr-1">
        </p-chip>
        <p-chip 
            label="Chip 2" 
            icon="pi pi-hashtag" 
            [removable]="true" 
            styleClass="p-mr-1">
        </p-chip><br />
        <p-chip 
            label="Chip 3" 
            icon="pi pi-hashtag" 
            [removable]="true" 
            styleClass="p-mr-1">
        </p-chip><br />
        <p-chip 
            label="Chip 4" 
            icon="pi pi-hashtag" 
            [removable]="true" 
            styleClass="p-mr-1">
        </p-chip>
    </p-chip>
</div>

app.module.ts

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';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ChipModule,
        ProgressSpinnerModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNGChip模板化

例子2：我们正在创建一个显示Angular PrimeNGChip模板的用户界面。在这里，我们在芯片内插入一个进度旋转器组件。

app.component.html

<div style="margin:100px; text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG Chip Templating
    </h3>
    <br />
    <p-chip>
        <p-progressSpinner 
            strokeWidth="1" 
            fill="yellow">
        </p-progressSpinner>
    </p-chip>
</div>

app.module.ts

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';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        ChipModule,
        ProgressSpinnerModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular PrimeNG Chip模板化