Selected City: {{selectedCity ? selectedCity.name : 'none'}}
Selected City: {{selectedCar||'none'}}
Selected Car: {{selectedCar2||'none'}}
import {DropdownModule} from 'primeng/primeng';
Two-way value binding is defined using ngModel and dropdown requires a collection of options where each option should follow the SelectItem interface that defines label-value properties.
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
import {SelectItem} from 'primeng/primeng';
export class MyModel {
cities: SelectItem[];
selectedCity: string;
constructor() {
this.cities = [];
this.cities.push({label:'Select City', value:null});
this.cities.push({label:'New York', value:{id:1, name: 'New York', code: 'NY'}});
this.cities.push({label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}});
this.cities.push({label:'London', value:{id:3, name: 'London', code: 'LDN'}});
this.cities.push({label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}});
this.cities.push({label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}});
}
}
Dropdown can be used in a model driven form as well.
<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
Options can be filtered using an input field in the overlay by enabling the filter property.
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" [filter]="true"></p-dropdown>
Label of an option is used as the display text of an item by default, for custom content support define a template that gets the SelectItem as the local template variable.
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
<template let-car>
<div class="ui-helper-clearfix" style="position: relative;height: 25px;">
<img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
<div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
</div>
</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: '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. |
scrollHeight | string | 200px | 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. |
autoWidth | boolean | true | Calculates the width based on options width, set to false for custom width. |
required | boolean | false | When present, it specifies that an input field must be filled out before submitting the form. |
disabled | boolean | false | When present, it specifies that the component should be disabled. |
editable | boolean | false | When present, custom value instead of predefined options can be entered using the editable input field. |
Name | Parameters | Description |
---|---|---|
onChange | event.originalEvent: Browser event event.value: Selected option value |
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. |
ui-dropdown-open | Container element when overlay is visible. |
Native component that requires the css of PrimeUI Dropdown.
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
<h3>Editable</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}" editable="editable"></p-dropdown>
<p>Selected City: {{selectedCar||'none'}}</p>
<h3>Content with Filters</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="filter">
<template let-car>
<div class="ui-helper-clearfix" style="position: relative;height: 25px;">
<img src="showcase/resources/demo/images/car/{{car.label}}.gif" style="width:24px;position:absolute;top:1px;left:5px"/>
<div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
</div>
</template>
</p-dropdown>
<p>Selected Car: {{selectedCar2||'none'}}</p>
export class DropdownDemo {
cities: SelectItem[];
selectedCity: string;
cars: SelectItem[];
selectedCar: string = 'BMW';
constructor() {
this.cities = [];
this.cities.push({label:'Select City', value:null});
this.cities.push({label:'New York', value:{id:1, name: 'New York', code: 'NY'}});
this.cities.push({label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}});
this.cities.push({label:'London', value:{id:3, name: 'London', code: 'LDN'}});
this.cities.push({label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}});
this.cities.push({label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}});
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'});
}
}