Learn Primeng Angular ListBox |p-listbox examples


ListBox is a graphical user component that displays a list of elements from which the user can select multiple elements at once.

The ListBox can also show optional checkboxes

Create an Angular application from Scratch

First create an angular application from scratch using angular cli command.

And integrate primeng libraries to Angular application

if you are not sure how to do it, You can check below things.

Once primeng is installed into application, and application is ready to run. You can import ListboxModule into angular application.

ListboxModule is an angular module for list box components and directives from primeng framework.

Add ListboxModule in application module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ListboxModule } from 'primeng/listbox';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ButtonModule,
    ListboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular ListBox example

First, Create a model object as defined below role.ts

interface Role {
    name: string,
    value: string
}
export default Role;

Import model into angular component

import Role from './model/Role';

In typescript component: Here are steps

  • declare roles model object
  • selectedRole with type of any type to hold the select values of list box
  • Initialize the roles object with static data or pull from API
import { Component } from '@angular/core';
import Role from './model/Role';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = "Primeng listbox example"
  roles: Role[];
  selectedRole: any;
  constructor() {
    this.roles = [
      { name: 'Administrator', value: 'ADMIN' },
      { name: 'Sales', value: 'SALE' },
      { name: 'Marketing', value: 'MKT' },
      { name: 'HR', value: 'HR' },
      { name: 'Finance', value: 'FIN' },
    ]
  }


}

selectedRole is declared using two way binding approach with ngModel attribute.

It holds role object when user selected an item in listbox.

Here is template component.

<h1>{{title}}</h1>

<p-listbox [options]="roles" [(ngModel)]="selectedRole" optionLabel="name"></p-listbox>

<p>Selected Role: {{selectedRole ? selectedRole.name : 'none'}}</p>

Output: Angular primeng listbox example

How to select default list box item on page load?

In the above example, selected listbox element is populated selectedRole object.

In constructor, please assign the value

  constructor() {
    this.selectedRole = this.roles[0];
  }

This will selected the first element of list box via programmatically.

How to display list box with checkbox

This example add the following features

  • Select multiple elements
  • Adding checkbox to list box
  • Filter an items

typescript component:

import { Component, OnInit } from '@angular/core';
import Role from '../model/Role';

@Component({
  selector: 'app-listbox-checkbox',
  templateUrl: './listbox-checkbox.component.html',
  styleUrls: ['./listbox-checkbox.component.scss']
})
export class ListboxCheckboxComponent implements OnInit {
  title = "Primeng listbox checkbox example"
  roles: Role[];
  selectedRoles: Role[];
  constructor() {
    this.roles = [
      { name: 'Administrator', value: 'ADMIN' },
      { name: 'Sales', value: 'SALE' },
      { name: 'Marketing', value: 'MKT' },
      { name: 'HR', value: 'HR' },
      { name: 'Finance', value: 'FIN' },
    ];
  }
  ngOnInit(): void {
  }

}

template component:

<h1>{{title}}</h1>
<p-listbox [options]="roles" [(ngModel)]="selectedRoles" [metaKeySelection]="false" [checkbox]="true" [multiple]="true"
    [filter]="true" optionLabel="name" [listStyle]="{'max-height':'250px'}" [style]="{'width':'15rem'}">
    <ng-template let-country pTemplate="item">

        <div>{{country.name}}</div>

    </ng-template>
</p-listbox>
{{selectedRoles|json}}

Output: Angular primeng listbox checkbox example

p-listbox is not working because of an error

The following are frequent errors when integrated into primeng listmodule

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘p-listbox’

Error: src/app/app.component.html:3:30 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'p-listbox'.
1. If 'p-listbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-listbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

3 <p-listbox [options]="roles" [(ngModel)]="selectedRole" optionLabel="name"></p-listbox>

Solution is

add formsModule into app.module.ts

import { FormsModule } from '@angular/forms';

Here is an complete code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ListboxModule } from 'primeng/listbox';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ListboxModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.