Selected City: {{selectedCity}}
Selected Cities: {{c}}
Selected Car: {{selectedCar}}
import {Listbox} from 'primeng/primeng';
Listbox requires a collection of options and a value to bind. Options should follow the SelectItem interface that defines label and value properties.
<p-listbox [options]="cities" [(value)]="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'});
}
}
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" [(value)]="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'});
}
}
Label of an option is used as the display text of an item by default, for custom content support define a template having a li item as a wrapper for the content. The local template variable refers to an option in the options collection.
<p-listbox [options]="cars" [(value)]="selectedCar" style="width:190px">
<template #car>
<li class="ui-helper-clearfix">
<img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
<div style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</div>
</li>
</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'});
}
}
Name | Type | Default | Description |
---|---|---|---|
options | array | null | An array of selectitems to display as the available options. |
value | any | false | Value of the listbox. |
multiple | boolean | false | When specified, allows selecting multiple values. |
scrollHeight | number | 200 | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. |
style | string | null | Inline style of the element. |
styleClass | string | null | Style class of the element. |
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. |
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. |
PrimeUI Listbox.
<h3 class="first">Single</h3>
<p-listbox [options]="cities" [(value)]="selectedCity"></p-listbox>
<p>Selected City: {{selectedCity}}</p>
<h3>Multiple</h3>
<p-listbox [options]="cities" [(value)]="selectedCities" multiple="multiple"></p-listbox>
<p>Selected Cities: <span *ngFor="#c of selectedCities">{{c}} </span></p>
<h3>Content</h3>
<p-listbox [options]="cars" [(value)]="selectedCar" style="width:190px">
<template #car>
<li class="ui-helper-clearfix">
<img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
<div style="font-size:20px;float:right;margin:15px 10px 0 0">{{car.value}}</div>
</li>
</template>
</p-listbox>
<p>Selected Car: {{selectedCar}}</p>
<button type="button" (click)="selectedCar=null" pButton icon="fa-close">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'});
}
}