Angular PrimeNG Chip Styling

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 Styling in Angular PrimeNG.

The Chip Component represents entities with the help of labels, icons, and images. Chip Styling can be used to style the chip component according to the design of your application.

Angular PrimeNG Chip Styling Classes:

• p-chip: This class represents the container element.
• p-chip-image: This is the container element when the image mode is enabled.
• p-chip-text: This class is applied to the text of the text component.
• pi-chip-remove-icon: This class is applied to the chip’s remove icon.

Syntax:

// In app.component.html
<p-chip 
    label="..." 
    styleClass="my-chip"
    icon="...">
</p-chip>

// In styles.css
.p-chip.my-chip {
    background-color: green;
    color: white;
}

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 example displays how to use chip styling to change the color and background color of the chip.

app.component.html

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

<p-chip label="Basic Custom Chip"
        styleClass="my-chip1">
</p-chip>

<p-chip label="Custom Styled Chip with Image"
        image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220915000203/download-200x200.png"
        styleClass="my-chip2">
</p-chip>

<p-chip label="Custom Styled Chip with Icon"
        styleClass="my-chip3"
        icon="pi pi-cog">
</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-chip1 {
    background-color: red;
    color: white;
}

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

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

Output:

Example 2: This example displays how to change the border-radius and how to apply a border to the chip.

app.component.html

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

<p-chip label="Small Border Radius"
        styleClass="my-chip1">
</p-chip>

<p-chip label="Medium Border Radius"
        icon="pi pi-user"
        styleClass="my-chip2">
</p-chip>

<p-chip label="Large Border Radius"
        styleClass="my-chip3"
        icon="pi pi-cog">
</p-chip>

<p-chip label="Different Border Color"
        styleClass="my-chip4"
        icon="pi pi-search">
</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-chip1 {
    background-color: red;
    border-radius: 5px;
    color: white;
}

.p-chip.my-chip2 {
    background-color: blue;
    border-radius: 10px;
    color: white;
}

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

.p-chip.my-chip4 {
    background-color: orange;
    border: 5px solid green;
    color: white;
}

Output:

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