Selected City: {{selectedCity||'none'}}
Selected Car: {{selectedCar||'none'}}
import {Dropdown} from 'primeng/primeng';
Dropdown requires a collection of options and a value to bind. Options should follow the SelectItem interface that defines label and value properties.
<p-dropdown [options]="cities" [(value)]="selectedCity"></p-dropdown>
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'}); } }
Options can be filtered using an input field in the overlay, there are 3 different filtering modes defined with filterMatchMode; "startsWith" (default), "contains" and "endsWith".
<p-listbox [options]="cities" [(value)]="selectedCities" [filter]="true" filterMatchMode="contains"></p-listbox>
Label of an option is used as the display text of an item, for custom content support enable customContent property as true and provide an unordered list. The label of an item should be provided explicity with data-label attribute on li element.
<p-dropdown [options]="cars" [(value)]="selectedCar" [customContent]="true" [filter]="true"> <ul> <li *ngFor="#car of cars" class="ui-helper-clearfix" [attr.data-label]="car.label" style="position: relative"> <img src="showcase/resources/demo/images/car/{>{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:10px"/> <div style="font-size:14px;float:right;margin:2px 0 0 50px">{>{car.label}}.</div> </li> </ul> </p-dropdown>
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: 'Volkswagen', value: 'Volkswagen'}); 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 dropdown. |
scrollHeight | number | 200 | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. |
customContent | boolean | false | Used to display customized content inside the listbox. |
style | string | null | Inline style of the element. |
styleClass | string | null | Style class of the element. |
filter | boolean | false | When specified, displays an input field to filter the items on keyup. |
filterMatchMode | string | startsWith | Filter algorithm, valid values are startsWith, contains and endsWith. |
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 dropdown changes. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-dropdown | Container element. |
ui-dropdown-label | Element to display label of selected option. |
ui-dropdown-trigger | Icon element. |
ui-dropdown-panel | Icon element. |
ui-dropdown-items-wrapper | Wrapper element of items list. |
ui-dropdown-items | List element of items. |
ui-dropdown-item | An item in the list. |
ui-dropdown-filter-container | Container of filter input. |
ui-dropdown-filter | Filter element. |
jQuery, jQuery UI WidgetFactory API, PrimeUI Listbox.
<h3 class="first">Single</h3> <p-dropdown [options]="cities" [(value)]="selectedCity" style="width:100px"></p-dropdown> <p>Selected City: {{selectedCity||'none'}}</p> <h3>Content with Filter</h3> <p-dropdown [options]="cars" [(value)]="selectedCar" [customContent]="true" [filter]="true" style="width:100px"> <ul> <li *ngFor="#car of cars" class="ui-helper-clearfix" [attr.data-label]="car.label" style="position: relative"> <img src="showcase/resources/demo/images/car/{>{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:10px"/> <div style="font-size:14px;float:right;margin-top:2px">{>{car.label}}.</div> </li> </ul> </p-dropdown> <p>Selected Car: {{selectedCar||'none'}}</p>
export class DropdownDemo { cities: SelectItem[]; selectedCity: string; cars: SelectItem[]; selectedCar: string = 'BMW'; constructor() { this.cities = []; this.cities.push({label:'Select City', value:''}); 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: 'Volkswagen', value: 'Volkswagen'}); this.cars.push({label: 'Volvo', value: 'Volvo'}); } }