Angular PrimeNG Form Chips Comma Separator Component

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Form Chips Comma Separator Component.

The Chips Component in PrimeNG is used to take input of many values in a single field. By default, a chip beaks when we press the enter key but this behavior can be altered by using the separate property. As of PrimeNG v14.0.1, only comma (,) can be set as a separator.

Angular PrimeNG Form Chips Comma Separator Component Properties:

• ngModel: This property is used to bound an array variable to the values of the chip input.
• separator: This property takes a character as a value and whenever you enter that character in the input a new chip will be started. Currently, the only possible value is a comma (“,”).

Syntax:

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

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

The project Structure will look like this after following the above steps:

Example 1: In this example, we used the separator property to set a comma as a separator.

app.component.html

<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>

app.component.css

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header h2 {
    margin-bottom: 0;
    color: green;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
  chips: string[] = [];
}

app.module.ts

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 {}

Output:

Example 2: In this example, we used the templating component inside the chip component with a comma as a separator. The value we enter will be passed to the template and shown according to the template.

app.component.html

<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>

app.component.css

div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.header h2 {
    margin-bottom: 0;
    color: green;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  chips: string[] = [];
}

app.module.ts

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 {}

Output:

Reference: http://primefaces.org/primeng/chips