Listbox Listbox is used to select one or more values from a list of items.

Single

Selected City: {{selectedCity}}

Multiple

Selected Cities: {{c}}  

Content

Selected Car: {{selectedCar}}

Import


import {Listbox} from 'primeng/primeng';

Getting Started

Two-way value binding is defined using ngModel and listbox requires a collection of options where each option should follow the SelectItem interface that defines label-value properties.


<p-listbox [options]="cities" [(ngModel)]="selectedCity"></p-listbox>


import {SelectItem} from 'primeng/primeng';

export class MyModel {

    cities: SelectItem[];

    selectedCity: string;

    constructor() {
        this.cities = [];
        this.cities.push({label:'New York', value:'New York'});
        this.cities.push({label:'Rome', value:'Rome'});
        this.cities.push({label:'London', value:'London'});
        this.cities.push({label:'Istanbul', value:'Istanbul'});
        this.cities.push({label:'Paris', value:'Paris'});
    }

}

Multiple

Listbox allows selecting only one item, setting multiple option enables choosing more than one item. In multiple case, model property should be an array.


<p-listbox [options]="cities" [(ngModel)]="selectedCities"></p-listbox>


import {SelectItem} from 'primeng/primeng';

export class MyModel {

    cities: SelectItem[];

    selectedCities: string[];

    constructor() {
        this.cities = [];
        this.cities.push({label:'New York', value:'New York'});
        this.cities.push({label:'Rome', value:'Rome'});
        this.cities.push({label:'London', value:'London'});
        this.cities.push({label:'Istanbul', value:'Istanbul'});
        this.cities.push({label:'Paris', value:'Paris'});
    }

}

Model Driven Forms

Listbox can be used in a model driven form as well.


<p-listbox [options]="cities" formControlName="cities"></p-listbox>

Custom Content

Label of an option is used as the display text of an item by default, for custom content support define a template where the local template variable refers to an option in the options collection.


<p-listbox [options]="cars" [(ngModel)]="selectedCar" style="width:190px">
    <template let-car>
        <div class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:5px 0 0 5px"/>
            <span style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</span>
        </div>
    </template>
</p-listbox>


import {SelectItem} from 'primeng/primeng'

export class MyModel {

    cars: SelectItem[];

    selectedCar: string;

    constructor() {
        this.cars = [];
        this.cars.push({label: 'Audi', value: 'Audi'});
        this.cars.push({label: 'BMW', value: 'BMW'});
        this.cars.push({label: 'Fiat', value: 'Fiat'});
        this.cars.push({label: 'Ford', value: 'Ford'});
        this.cars.push({label: 'Honda', value: 'Honda'});
        this.cars.push({label: 'Jaguar', value: 'Jaguar'});
        this.cars.push({label: 'Mercedes', value: 'Mercedes'});
        this.cars.push({label: 'Renault', value: 'Renault'});
        this.cars.push({label: 'VW', value: 'VW'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}

Attributes

Name Type Default Description
options array null An array of selectitems to display as the available options.
multiple boolean false When specified, allows selecting multiple values.
disabled boolean false When present, it specifies that the element should be disabled.
style string null Inline style of the element.
styleClass string null Style class of the element.

Events

Name Parameters Description
onChange event.originalEvent: browser event
event.value: single value or an array of values that are selected
Callback to invoke when value of listbox changes.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-listbox Container element.
ui-listbox-list List container.
ui-listbox-item An item in the list.

Dependencies

Native component that requires the css of PrimeUI Listbox.


<h3 class="first">Single</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCity"></p-listbox>

<p>Selected City: {{selectedCity}}</p>

<h3>Multiple</h3>
<p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple"></p-listbox>
<p>Selected Cities: <span *ngFor="let c of selectedCities">{{c}}  </span></p>

<h3>Content</h3>
<p-listbox [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'190px','max-height':'250px'}">
    <template let-car>
        <div class="ui-helper-clearfix">
            <img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:5px 0 0 5px"/>
            <span style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</span>
        </div>
    </template>
</p-listbox>
<p>Selected Car: {{selectedCar}}</p>

<button type="button" (click)="selectedCar=null" pButton icon="fa-close" label="Clear Selected Car"></button>


export class ListboxDemo {

    cities: SelectItem[];

    selectedCity: string;

    selectedCities: string[];

    cars: SelectItem[];

    selectedCar: string = 'BMW';

    constructor() {
        this.cities = [];
        this.cities.push({label:'New York', value:'New York'});
        this.cities.push({label:'Rome', value:'Rome'});
        this.cities.push({label:'London', value:'London'});
        this.cities.push({label:'Istanbul', value:'Istanbul'});
        this.cities.push({label:'Paris', value:'Paris'});

        this.cars = [];
        this.cars.push({label: 'Audi', value: 'Audi'});
        this.cars.push({label: 'BMW', value: 'BMW'});
        this.cars.push({label: 'Fiat', value: 'Fiat'});
        this.cars.push({label: 'Ford', value: 'Ford'});
        this.cars.push({label: 'Honda', value: 'Honda'});
        this.cars.push({label: 'Jaguar', value: 'Jaguar'});
        this.cars.push({label: 'Mercedes', value: 'Mercedes'});
        this.cars.push({label: 'Renault', value: 'Renault'});
        this.cars.push({label: 'VW', value: 'VW'});
        this.cars.push({label: 'Volvo', value: 'Volvo'});
    }
}