Angular PrimeNG Form Listbox Filter 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 Filter 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. Enabling the filtering option by setting its value as true, allow one to search for the item from the given list by providing the input field at the header.

Angular PrimeNG Form Listbox Filter Component Properties:

• 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.

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 --open

Example 1: This is the basic example that shows how to use the Angular PrimeNG Form Listbox Filter Component.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>
<h5>
  Angular PrimeNG Form Listbox Filter Component.
</h5>

<p-listbox [options]="gfg"
           optionLabel="name"
           [filter]="true"
           [checkbox]="true">
</p-listbox>

• app.component.ts:

Javascript

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

interface City {
    name: string;
    activeStatus: boolean;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    gfg: City[];
    constructor() {
        this.gfg = [
            { name: 'AngularJS', activeStatus: false },
            { name: 'ReactJS', activeStatus: true },
            { name: 'JavaScript', activeStatus: false },
            { name: 'PrimeNG', activeStatus: true },
            { name: 'Bootstrap', activeStatus: false }
        ];
    }
}

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

Example 2: This is another basic example that shows how to use the Angular PrimeNG Form Listbox Filter Component using the multiple attributes and some options to be disabled.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>
<h5>
  Angular PrimeNG Form Listbox Filter Component.
</h5>

<p-listbox [options]="gfg"
           optionLabel="name"
           optionDisabled="activeStatus"
           [filter]="true"
           [multiple]="true"
           [checkbox]="true">
</p-listbox>

• app.component.ts:

Javascript

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

interface City {
    name: string;
    activeStatus: boolean;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    gfg: City[];
    constructor() {
        this.gfg = [
            { name: 'AngularJS', activeStatus: false },
            { name: 'ReactJS', activeStatus: true },
            { name: 'JavaScript', activeStatus: false },
            { name: 'PrimeNG', activeStatus: true },
            { name: 'Bootstrap', activeStatus: false }
        ];
    }
}

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