Angular PrimeNG表格Chips逗号分隔器组件

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来做响应式网站，非常容易。在这篇文章中，我们将看到**Angular PrimeNG表格Chips逗号分隔器组件。

PrimeNG中的Chips组件是用来在一个字段中接受许多数值的输入。默认情况下，当我们按下回车键时，一个Chips会发出声音，但这种行为可以通过使用分离属性来改变。从PrimeNG v14.0.1开始，只有逗号（,）可以被设置为分隔符。

Angular PrimeNG Form Chips Comma Separator 组件属性：

ngModel : 该属性用于将一个数组变量与Chips输入的值绑定。
separator。该属性以一个字符为值，每当你在输入中输入该字符时，一个新的Chips将被启动。目前，唯一可能的值是逗号（”，”）。

语法:

<p-chips 
    [(ngModel)]=" ... " 
    separator=",">
</p-chips>

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

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

ng new appname

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

cd appname

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

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

按照上述步骤，项目结构将看起来像这样。

Angular PrimeNG表格Chips逗号分隔器组件

例子1：在这个例子中，我们使用分隔符属性来设置一个逗号作为分隔符。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Form Chips 
          Comma Separator Component
      </h3>
</div>
  
<div class="example-container">
    <p-chips 
         [(ngModel)]="chips" 
         separator=",">
      </p-chips>
</div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2 {
    margin-bottom: 0;
    color: green;
}

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

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

输出:

Angular PrimeNG表格Chips逗号分隔器组件

例子2：在这个例子中，我们在Chips组件里面使用了模板组件，用逗号作为分隔符。我们输入的值将被传递给模板，并根据模板的要求显示。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Form Chips 
          Comma Separator Component
      </h3>
</div>
  
<div class="example-container">
    <p-chips 
         [(ngModel)]="chips" separator=",">
        <ng-template let-item pTemplate="item">
            Filter: {{item}}
        </ng-template>
    </p-chips>
</div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
  
.header h2 {
    margin-bottom: 0;
    color: green;
}

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

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

输出:

Angular PrimeNG表格Chips逗号分隔器组件