Angular PrimeNG Form Listbox Styling Component

Angular PrimeNG is a UI component library developed and maintained by PrimeFaces. It is widely used by angular developers around the world for developing fast and scalable web applications using AngularJS. In this article, we will see the Angular PrimeNG Form Listbox Styling Component.

The Listbox Component is used to provide users with a list of options where one or more options can be selected. There are a total of five structural styling classes that can be used to alter the styles of the Listbox component according to our needs.

Angular PrimeNG Form Listbox Styling Classes:

• p-listbox: This class is the container element of the Listbox component.
• p-listbox-list: This class is the container of the list.
• p-listbox-item: This class represents a single item of the listbox.
• p-listbox-header: This class is the container element of the Listbox header.
• p-listbox-filter-container: This class is the container of the Listbox filter.

There are a few other styling properties that can be used with Form Listbox, which are described below:

• options: This is an array of objects to show as Listbox options.
• optionLabel: This is the name of the property that will be used as the option label.
• styleClass: It is the style class of the component.

Syntax:

// app.component.html
<p-listbox 
    styleClass="listbox1"
    [options]="sports" 
    [(ngModel)]="chosenSport" 
    optionLabel="name">

    <ng-template pTemplate="header">
        ...
    </ng-template>
</p-listbox>

// app.component.css
:host ::ng-deep .Style-Class {
    // CSS
}

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:

Example 1: In this example, we used the “p-listbox-header” class to change the color and the background color of the Listbox Header.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Styling Component</h3>

<h4>Header Color and Background</h4>

<p-listbox styleClass="listbox1"
           [options]="sports"
           [(ngModel)]="chosenSport"
           optionLabel="name">
    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>

• app.component.css

CSS

:host ::ng-deep .listbox1 {
    width: 250px;
}

:host ::ng-deep .p-listbox-header {
    color: white;
    background-color: green;
    font-weight: bold;
}

• app.component.ts

Javascript

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

interface Sport {
    name: string;
    rating: number;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    sports: Sport[] = [];
    chosenSport?: Sport;

    ngOnInit() {
        this.sports = [
            {
                name: "Cricket",
                rating: 5
            },
            {
                name: "Hockey",
                rating: 4
            },
            {
                name: "VolleyBall",
                rating: 4
            },
            {
                name: "FootBall",
                rating: 3
            },
            {
                name: "Badminton",
                rating: 4
            }
        ];
    }
}

• app.module.ts

Javascript

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

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

Output:

Example 2: In this example, we used the “p-listbox-list” and “p-listbox-item” classes of the ListBox component to change its style.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Listbox Styling Component</h3>

<h4>Custom Styling</h4>

<p-listbox styleClass="listbox1"
           [options]="sports"
           [(ngModel)]="chosenSport"
           optionLabel="name">
    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>

• app.component.css

CSS

:host ::ng-deep .listbox1 {
    width: 250px;
}

:host ::ng-deep .p-listbox-header {
    color: white;
    background-color: green;
    font-size: 20px;
}

:host ::ng-deep .p-listbox-list {
    border: 5px solid green;
}

:host ::ng-deep .listbox1 .p-listbox-item {
    color: red;
    font-weight: bold;
}

• app.component.ts

Javascript

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

interface Sport {
    name: string;
    rating: number;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    sports: Sport[] = [];
    chosenSport?: Sport;

    ngOnInit() {
        this.sports = [
            {
                name: "Cricket",
                rating: 5
            },
            {
                name: "Hockey",
                rating: 4
            },
            {
                name: "VolleyBall",
                rating: 4
            },
            {
                name: "FootBall",
                rating: 3
            },
            {
                name: "Badminton",
                rating: 4
            }
        ];
    }
}

• app.module.ts

Javascript

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

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

Output:

Reference: https://primefaces.org/primeng/listbox