Angular PrimeNG Form Listbox Custom Content 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 the Form Listbox Custom Content 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 Custom Content helps to define the item named ng-template, where the local ng-template variable refers to an option in the options collection. The custom header and footer can additionally be facilitated with the help of header, filter & footer templates.

Syntax:

<p-listbox [options]="..." 
[(ngModel)]="..." 
[multiple]="true" 
optionLabel="name" 
filterBy="label" 
[listStyle]="{''}">
   <ng-template pTemplate="...">
       ...
   </ng-template>
</p-listbox>

Angular PrimeNG Form Listbox Custom Content Properties:

• 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.
• multiple: It is used to allow selecting multiple values. It is of the boolean data type, the default value is false.
• optionLabel: It is used to give the label of an option, It is of string data type, and the default value is the label.
• filterBy: It is used to specify filter displays with this value. It is of string data type.
• 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.

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 the successful installation, the following project structure will appear:

Example1: This example describes the basic usage of the Form Listbox Custom Content Component in Angular PrimeNG.

• 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
        Custom Content Component
    </h4>
    <p-listbox [options]="cities"
               [(ngModel)]="selectedCityCode"
               optionLabel="name"
               [filter]="true">
        <ng-template pTemplate="header">
            Header Content
        </ng-template>
    </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: 'MUM' },
            { name: 'Varanasi', code: 'VAR' },
            { name: 'Jabalpur', code: 'JAB' },
            { name: 'Nashik', code: 'NK' },
            { name: 'Vasai', code: 'VAS' },
        ];
    }
    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';

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

Output:

Example2: This example describes the basic usage of the Form Listbox Custom Content Component in Angular PrimeNG, by disabling the input field.

• 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
        Custom Content Component
      </h4>
    <p-listbox [options]="cities"
               [(ngModel)]="selectedCityCode"
               optionLabel="name"
               [filter]="true"
               disabled="true">
        <ng-template pTemplate="header">
            Header Content
        </ng-template>
    </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: 'MUM' },
            { name: 'Varanasi', code: 'VAR' },
            { name: 'Jabalpur', code: 'JAB' },
            { name: 'Nashik', code: 'NK' },
            { name: 'Vasai', code: 'VAS' },
        ];
    }

    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';

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

Output:

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