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-dropdown [options]="cities" [(value)]="selectedCities" [filter]="true" filterMatchMode="contains"></p-dropdown>
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-dropdown [options]="cars" [(value)]="selectedCar" [filter]="true" style="width:100px">
<template #car>
<li class="ui-helper-clearfix" 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>
</template>
</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. |
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. |
PrimeUI Dropdown.
<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" [filter]="true" style="width:100px">
<template #car>
<li class="ui-helper-clearfix" 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>
</template>
</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'});
}
}