Angular PrimeNG Chip Properties

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see Chip Properties in Angular PrimeNG.

The Chip Component represents entities using labels, icons, and images. Chips can be used to take information from the user, filter content, or trigger some action.

Angular PrimeNG Chip Properties:

• label: It defines the text of the chip to display. It accepts string values and the default value is null.
• icon: It defines the icon of the chip to display. It accepts string values and the default value is null.
• image: It defines the image of the chip to display. It accepts string values and the default value is null.
• removable: It defines whether to show a remove icon with the chip. It accepts a boolean value and by default, it is false.
• style: It is used to define the inline style of the component. It accepts string values and the default value is null.
• styleClass: It is used to define the style class of the component. It accepts string values and the default value is null.
• removeIcon: It is used to define which item to show as a remove icon. It accepts string values and the default value is “pi pi-times-circle”.

Syntax:

<p-chip label="..." icon="..."></p-chip>

Creating Angular application & module installation:

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

ng new newapp

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

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

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

Project Structure: After complete installation, the project structure will look like the following:

Example 1: This is the basic example that illustrates the use of the chip properties in Angular PrimeNG.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Properties</h3>

<div>
    <p-chip
        label="Basic Chip with just text"
        class="mr-2">
    </p-chip>
    <p-chip
        label="Text with a check icon"
        icon="pi pi-check"
        class="mr-2">
    </p-chip>
</div>

<div class="mt-2">
    <p-chip
        label="Text with a hashtag icon"
        icon="pi pi-hashtag">
    </p-chip>
</div>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ChipModule } from 'primeng/chip';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This example illustrates the use of the image and the styling of the chip component in Angular PrimeNG.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Properties</h3>

<p-chip label="Basic Chip with just text"
        class="mr-2">
</p-chip>

<p-chip label="Text with an image"
        image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220915000203/download-200x200.png"
        class="mr-2">
</p-chip>

<p-chip label="Custom Styled Chip"
        styleClass="my-chip"
        icon="pi pi-hashtag">
</p-chip>

app.component.ts

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

@Component({
    selector:'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ChipModule } from 'primeng/chip';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

styles.css

p-chip{
    margin-top: 20px;
    display: block;
}

.p-chip.my-chip {
    background-color: green;
    color: white;
}

Output:

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