Angular PrimeNG Form Listbox Events 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 be seeing the Angular PrimeNG Form Listbox Events Component.

The Listbox Component is used to provide users with a list of options where one or more options can be selected. When users interact with the listbox component in a specific way, some events are triggered by the list box. These events are listed below.

Angular PrimeNG Form Listbox Events:

• onChange: This accepts a callback function to invoke when the value of the list box changes.
• onDblClick: This accepts a callback function to invoke when an item is double-clicked.
• onClick: This accepts a callback function to invoke when a list box option is clicked.

Angular PrimeNG Form Listbox Properties:

• options: This accepts an array of objects to show as listbox items.
• optionLabel: This is a property of the object passed to the options property, to display the labels of the ListBox options.
• styleClass: It is the styleClass of the component.
• multiple: When this property is set to true, multiple options can be selected by the user.
• checkbox: This property is used to show the checkboxes to the user when the listbox component is in multiple modes.
• showToggleAll: It specifies whether to show the toggle all checkboxes on the top of the list if the “multiple” property is set to true.

Syntax:

<p-listbox
    (event-name)="callbackToInvoke()"

    [options]="..." 
    [(ngModel)]="..."
    ... 
    optionLabel="...">
</p-listbox>

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: This example illustrates the use of the onChange and the onClick events of the ListBox component. A toast message will be displayed when any of these events is triggered.

• app.component.html:

HTML

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

<p-listbox
    (onChange)="listboxChange()"
    (onClick)="listboxClick()"
    styleClass="listbox1"
    [options]="sports"
    [(ngModel)]="chosenSport"
    optionLabel="name">

    <ng-template pTemplate="header">
        Select a Sport - GFG
    </ng-template>
</p-listbox>

<p-toast></p-toast>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

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

export class AppComponent {
    constructor(private mService: MessageService) { }
    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
            }
        ];
    }

    listboxChange() {
        this.mService.add({
            severity: "success",
            summary: "ListBox Value Changed",
            detail: "onChange Event Triggered"
        })
    }

    listboxClick() {
        this.mService.add({
            severity: "info",
            summary: "ListBox Option Clicked",
            detail: "onClick Event Triggered"
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';

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

Output:

Example 2: In this example, we used the onDblClick event of the ListBox component to show a toast message whenever a list box item is double-clicked.

• app.component.html:

HTML

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

<p-listbox
    (onDblClick)="listboxDblClick()"
    styleClass="listbox1"
    [multiple]="true"
    [options]="courses"
    [checkbox]="true"
    [showToggleAll]="false"
    [(ngModel)]="chosenCourses"
    optionLabel="name">

    <ng-template pTemplate="header">
        Select a Course - GFG
    </ng-template>
</p-listbox>

<p-toast></p-toast>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

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

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

export class AppComponent {
    constructor(private mService: MessageService) { }
    courses: Course[] = [];
    chosenCourses?: Course[];

    ngOnInit() {
        this.courses = [
            {
                name: "Self Paced DSA",
                rating: 5
            },
            {
                name: "HTML Basic",
                rating: 4
            },
            {
                name: "ReactJS",
                rating: 5
            },
            {
                name: "Competitive Programming",
                rating: 4
            },
            {
                name: "Full Stack Development",
                rating: 4
            }
        ];
    }

    listboxDblClick() {
        this.mService.add({
            severity: "info",
            summary: "ListBox Item DoubleClicked",
            detail: "onDblClick Event Triggered"
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';

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

Output:

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