Angular PrimeNG Form Chips基本组件

Angular PrimeNG是一个开源的前端UI库，它有许多原生的Angular UI组件，可以帮助开发人员建立一个快速和可扩展的Web解决方案。在这篇文章中，我们将讨论Angular PrimeNG Form Chips基本组件。

芯片组件用于在一个输入字段中接受多个数值的输入。最常见的例子是大多数电子商务网站的过滤器输入。

Angular PrimeNG Form Chips 基本组件属性：

ngModel。该属性用于将一个数组变量与芯片输入的值绑定。
separator。这个属性以一个字符为值，每当你在输入中输入该字符时，就会启动一个新的芯片。目前，唯一可能的值是”，”。

语法:

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

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

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

ng new appname

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

cd appname

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

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

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

Angular PrimeNG Form Chips基本组件

Project Structure

**运行以下命令以查看输出。

ng serve --open

例子1：在这个例子中，我们创建一个简单的芯片输入。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Form 
          Chips Basic Component
      </h3>
</div>
  
<div class="example-container">
    <p-chips 
        [(ngModel)]="chips">
      </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 Form Chips基本组件

例2：在这个例子中，我们用逗号(,)作为分隔符，每当我们碰到逗号，当前的芯片就会形成，新的芯片会从下一个字符开始。

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Form 
          Chips Basic 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 Form Chips基本组件