Angular PrimeNG Chip Component

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

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