Selected City: {{selectedCity||'none'}}
Selected Car: {{selectedCar||'none'}}
import {Dropdown} 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:'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'});
}
}
Dropdown can be used in a model driven form as well by defining ngFormControl or ngControl.
<p-dropdown [options]="cities" ngControl="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 having a li item having .ui-dropdown-item style class as a wrapper for the content. The list item should have data-value attribute defined as the value of the select item. The local template variable refers to an option in the options collection.
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [filter]="true" style="width:100px">
<template let-car>
<li class="ui-dropdown-list-item ui-helper-clearfix" style="position: relative" [attr.data-value]="car.value">
<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: '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. |
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. |
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||'none'}}</p>
<h3>Content with Filter</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [filter]="true" style="width:150px">
<template let-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: 'VW', value: 'VW'});
this.cars.push({label: 'Volvo', value: 'Volvo'});
}
}