Open In App

Angular PrimeNG Form Chips Basic Component

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will discuss Angular PrimeNG Form Chips Basic Component.

A Chip Component is used to take input of multiple values in a single input field. The most common example where chips are used is the filter input on most e-commerce websites.

Angular PrimeNG Form Chips Basic 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 “,”.

Syntax:

<p-chips 
    [(ngModel)]=" ... ">
</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:

Project Structure

Run the below command to see the output.

ng serve --open

Example 1: In this example, we create a simple chips input.

app.component.html




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


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 a comma (,) as a separator, whenever we hit the comma the current chip will form and a new chip will be started from the next character.

app.component.html




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


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



Last Updated : 15 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads