Angular PrimeNG Form Chips Basic Component
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 h 2 {
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 h 2 {
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
Share your thoughts in the comments
Please Login to comment...