Angular PrimeNG Form Chips Styling Component

Angular PrimeNG is a front-end UI component library for Angular Applications. It is developed and maintained by PrimeTek. PrimeNG helps developers to create stunning web interfaces in less time using pre-built components and themes. In this article, we will discuss the Angular PrimeNG Form Chips Styling Component.

The Form Chips Component is used to enter multiple values in a single input field. The use of the chips can be seen on most e-commerce sites like Amazon, Flipkart, Ajio, etc.

Angular PrimeNG Form Chips Styling Classes:

• p-chips: It is the container element.
• p-chips-token: It is the chips element container.
• p-chips-token-icon: This class contains the icon of the chips
• p-chips-token-label: This class contains the label of the chips.
• p-chips-input-token: This class is the container element of the input.

Syntax:

// In app.component.html
<p-chips [(ngModel)]="..." ></p-chips>

// In app.component.css
:host ::ng-deep .Styling-Class{
    // CSS Properties
}

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following.

Project Structure

Example 1: In this example, we used the “p-chips-token-icon” class to increase the size of the chips icon to 30px.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form
    Chips Styling Component</h4>

<p-chips
    [(ngModel)]="chipValues">
</p-chips>

• app.component.css:

CSS

:host ::ng-deep .p-chips-token-icon {
    font-size: 30px;
}

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    chipValues: String[] = [];
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ChipsModule } from 'primeng/chips';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we used the “p-chips-token-label” class to change the font size and to change the color of the chips label.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form
    Chips Styling Component</h4>

<p-chips
    [(ngModel)]="chipValues">
</p-chips>

• app.component.css:

CSS

:host ::ng-deep .p-chips-token-label {
    font-size: 25px;
    color: green;
}

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    chipValues: String[] = [];
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ChipsModule } from 'primeng/chips';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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