Angular PrimeNG Chip Component - GeeksforGeeks

24 Aug, 2021
Angular PrimeNG is an open-source framework with a rich set 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 know how to use the Chip component in Angular PrimeNG.
Chip component: It is used to represent icons, labels, and images.
Properties:
label: It is used to define the text to display. It is of string data type, the default value is null.
icon: It is used to define the icon to display. It is of string data type, the default value is null.
image: It is used to define the image to display. It is of string data type, the default value is null.
removable: It is used to define whether to display a remove icon. It is of boolean data type, the default value is false.
style: It is used to set the inline style of the component. It is of object data type, the default value is null.
styleClass: It is used to define the style class of the component. It is of string data type, the default value is null.
removeIcon: It is the icon of the remove element. It is of string data type, the default value is pi pi-times-circle.
Styling:
p-chip: It is the container styling element.
p-chip-image: It is the container element in image mode.
p-chip-text: It styles the text of the chip.
pi-chip-remove-icon: It styles the remove icon.
 
Events:
onRemove: It is a callback function that is invoked when a chip is removed.
Creating Angular application & module installation:
Step 1: Create an Angular application using the following command.ng new appname
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 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 3: Install PrimeNG in your given directory.npm install primeng --save
npm install primeicons --save
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: It will look like the following:
 
Example 1: This is the basic example that shows how to use a Chip component.
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG Chip Component</h5><div class="p-d-flex p-ai-center">  <p-chip label="A" styleClass="p-mr-1"></p-chip>  <p-chip label="B" styleClass="p-mr-1"></p-chip>  <p-chip label="C" styleClass="p-mr-1"></p-chip>  <p-chip label="D" styleClass="p-mr-1"></p-chip>  <p-chip label="E" styleClass="p-mr-1"></p-chip>  <p-chip label="F"></p-chip></div>
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule }     from "@angular/platform-browser";import { BrowserAnimationsModule }     from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { ChipModule } from "primeng/chip";  @NgModule({  imports: [BrowserModule,               BrowserAnimationsModule,             ChipModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
Example 2: In this example, we will know how to use removable and icon properties in the Chip component.
app.component.html
<h2>GeeksforGeeks</h2><h5>PrimeNG Chip Component</h5><div class="p-d-flex p-ai-center">      <p-chip    label="A"    removable="true"    styleClass="p-mr-1"    icon="pi pi-angle-double-left">  </p-chip>      <p-chip    label="B"    icon="pi pi-angle-left  "    removable="true"    styleClass="p-mr-1">  </p-chip>      <p-chip    label="C"    icon="pi pi-bars"    removable="true"    styleClass="p-mr-1">  </p-chip>      <p-chip    label="D"    icon="pi pi-angle-right"    removable="true"    styleClass="p-mr-1">  </p-chip>      <p-chip    label="E"    icon="pi pi-angle-double-right"    removable="true"    styleClass="p-mr-1">  </p-chip></div>
app.module.ts
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { BrowserAnimationsModule }     from "@angular/platform-browser/animations";import { AppComponent } from "./app.component";import { ChipModule } from "primeng/chip";  @NgModule({  imports: [BrowserModule,               BrowserAnimationsModule,             ChipModule],  declarations: [AppComponent],  bootstrap: [AppComponent],})export class AppModule {}
Output:
Reference: https://primefaces.org/primeng/showcase/#/chip
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?