Angular PrimeNG Form Chips模板组件

Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站，非常方便。这篇文章将告诉我们如何在Angular ngx bootstrap中使用日历组件。

Chips模板组件：它用于在一个带有图标的输入栏上输入多个值。

语法:

<p-chips [(ngModel)]="values3">
     <ng-template let-item pTemplate="item">
         {{item}} - (active) <i class="pi pi-user p-ml-2"></i>
     </ng-template>
 </p-chips>

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

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

ng new appname

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

cd appname

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

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

Project Structure:

示例1：在下面的代码中，我们将使用上述语法来演示表格Chips模板组件的使用。

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Chips Template Component</h4>
    <div class="p-fluid">
        <h5>Template</h5>
        <p-chips [(ngModel)]="values3">
            <ng-template let-item pTemplate="item">
                {{item}} - (active) 
                <i class="pi pi-user p-ml-2"></i>
            </ng-template>
        </p-chips>
    </div>
</div>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    values1: string[];
  
    values2: string[];
  
    values3: string[];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { ChipsModule } from 'primeng/chips';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        ButtonModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

输出:

示例2：在下面的代码中，我们将使用上述语法来演示表格Chips模板组件的使用。

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Chips Template Component</h4>
    <div class="p-fluid">
        <h5>Template</h5>
        <p-chips [(ngModel)]="values3">
            <ng-template let-item pTemplate="item">
                {{ item }} - (Offline) 
                <i class="pi pi-user p-ml-2"></i>
            </ng-template>
        </p-chips>
    </div>
</div>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    values1: string[];
  
    values2: string[];
  
    values3: string[];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { ChipsModule } from 'primeng/chips';
import { ButtonModule } from 'primeng/button';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        ButtonModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

输出: