Angular PrimeNG Form Listbox Properties 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 see how to use the Form Listbox Properties Component in Angular PrimeNG.

The 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. The various Listbox Properties Components that are facilitated by the Angular PrimeNG, are described below:

Angular PrimeNG Form Listbox Properties:

• ariaFilterLabel: It is used to define a string that labels the input filter element. It is of string data type, the default value is null.
• checkbox: It is used to allow selecting items with checkboxes. It is of boolean data type, the default value is false.
• dataKey: It is the property that is used to Identify an option. It is of string data type, the default value is null.
• disabled: It specifies that the element should be disabled. It is of the boolean data type, the default value is false.
• filter: It is used to display a filter input at the header. It is of boolean data type, the default value is false.
• filterMatchMode: It is used to define how the items are filtered. It is of string data type, the default value is contained.
• filterValue: It is used to specify filter displays with this value. It is of string data type, the default value is null.
• filterLocale: It is used to set the locale to use in filtering. It is of string data type, the default value is undefined.
• filterPlaceHolder: It is used to define the placeholder of the filter input. It is of string data type, the default value is null.
• listStyle: It is used to set the Inline style of the list element, It is of string data type, and the default value is null.
• listStyleClass: It is used to set the Style class of the list element, It is of string data type, and the default value is null.
• metaKeySelection: It is used to define how multiple items can be selected. It is of the boolean data type, and the default value is true.
• multiple: It is used to allow selecting multiple values. It is of the boolean data type, the default value is false.
• readonly: it specifies that the element value cannot be changed. It is of the boolean data type, the default value is false.
• emptyMessage: It is used to set the text to display when there is no data. It is of string data type, the default value is no records found.
• emptyFilterMessage: It is used to set the text to display when filtering does not return any results, It is of string data type, the default value is no records found.
• options: It is an array representing select items to display as the available options, It is of array data type, and the default value is null.
• optionLabel: It is used to give the label of an option, It is of string data type, and the default value is the label.
• 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.
• optionGroupLabel: It is used to give a label to the option group. It is of string data type, the default value is the label.
• optionGroupChildren: It is used to get the name of the options field of the option group. It is of string data type, the default value is an item.
• group: It is used to set whether to display options as grouped when nested options are provided. It is of the boolean data type, the default value is false.
• showToggleAll: It is used to set whether the header checkbox is shown in multiple modes. It is of the boolean data type, and the default value is true.
• style: It is used to set the inline style of the element. It is of string data type, the default value is null.
• styleClass: It is used to set the style class of the element. It is of string data type, the default value is null.

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:

Example1: In the below code example, we will be using the above properties to demonstrate the use of the Form Listbox Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
          Angular PrimeNG Form Listbox
          Properties Component
     </h4>
    <p-listbox [options]="cities"
               [(ngModel)]="selectedCityCode"
               optionLabel="name">
    </p-listbox>
</div>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup }
    from "primeng/api";
interface City {
    name: string;
    code: string;
}

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

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

    countries: any[];

    selectedCity: City;

    selectedCountries: any[];

    groupedCities: SelectItemGroup[];

    constructor(private primengConfig: PrimeNGConfig) {
        this.cities = [
            { name: "Mumbai", code: "IND" },
            { name: "Varanasi", code: "RM" },
            { name: "Jabalpur", code: "LDN" },
            { name: "Nashik", code: "IST" },
            { name: "Vasai", code: "PRS" }
        ];
    }

    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 { 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:

Example2: In the below code example, we will be using the above properties to demonstrate the use of the Form Listbox Properties Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form Listbox
        Properties Component
    </h4>
    <p-listbox [options]="cities"
               [(ngModel)]="selectedCityCode"
               optionLabel="name"
               disabled="true">
    </p-listbox>
</div>

• app.component.ts

Javascript

import { Component } from "@angular/core";
import { PrimeNGConfig, SelectItemGroup }
    from "primeng/api";
interface City {
    name: string;
    code: string;
}

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

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

    countries: any[];

    selectedCity: City;

    selectedCountries: any[];

    groupedCities: SelectItemGroup[];

    constructor(private primengConfig: PrimeNGConfig) {
        this.cities = [
            { name: "Mumbai", code: "IND" },
            { name: "Varanasi", code: "RM" },
            { name: "Jabalpur", code: "LDN" },
            { name: "Nashik", code: "IST" },
            { name: "Vasai", code: "PRS" }
        ];
    }

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

• app.mosule.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 { 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://www.primefaces.org/primeng/listbox