Angular PrimeNG Form Listbox Value Binding Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the ListBox Component in Angular PrimeNG.

ListBox component is used to make a list component from which we can select one or more items and can also be discarded if the item is not required by unchecking in the list. In Listbox Value Binding Component, the option value property of the Listbox can be used to specify the property of the model to be used as the value.

Angular PrimeNG Form SelectButton Value Binding Component Properties:

• optionValue: It is used to give the value of an option, and defaults to the option itself when not defined. It is of string data type, the default value is value.

Syntax:

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

Creating Angular application & module installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above processes, it will look like the following.

Steps to run the application: Run the below command to see the output.

ng serve --save

Example 1: In the below code, we will make use of the above syntax to demonstrate the use of the Form Listbox Value Binding Component.

• app.component.html:

HTML

<div style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Form Listbox Value Binding Component</h3>
    <p-listbox
        [options]="gfg"
        optionLabel="name"
        optionValue="code">
      </p-listbox>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig, SelectItemGroup } from 'primeng/api';

interface course {
    name: string;
    code: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
      `
        :host ::ng-deep .ui-listbox {
          width: 20em;
        }
      `,
    ],
})

export class AppComponent {
    gfg: course[];

    constructor(private primengConfig: PrimeNGConfig) {
        this.gfg = [
            { name: 'DSA', code: 'D' },
            { name: 'C++', code: 'c' },
            { name: 'JAVA', code: 'J' },
            { name: 'Python', code: 'P' },
        ];
    }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• app.module.ts:

Javascript

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

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

export class AppModule { }

Output:

Example 2: In the below code, we will make use of the above syntax to demonstrate the use of the Form Listbox Value Binding Component.

• app.component.html:

HTML

<div style="text-align:center">
<h2 style="color:green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Form Listbox Value Binding Component</h5>
<p-listbox
    [options]="gfg"
    [checkbox]="true"
    [filter]="true"
    [multiple]="false"
    disabled="true"
    optionLabel="name"
    optionValue="code"
    >
</p-listbox>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig, SelectItemGroup } from 'primeng/api';

interface course {
    name: string;
    code: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
      `
        :host ::ng-deep .ui-listbox {
            width: 20em;
        }
      `,
    ],
})

export class AppComponent {
    gfg: course[];

    constructor(private primengConfig: PrimeNGConfig) {
        this.gfg = [
            { name: 'DSA', code: 'D' },
            { name: 'C++', code: 'c' },
            { name: 'JAVA', code: 'J' },
            { name: 'Python', code: 'P' },
        ];
    }

    ngOnInit() {
      this.primengConfig.ripple = true;
    }
}

• app.module.ts:

Javascript

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

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

export class AppModule { }

Output:

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