Dropdown Dropdown is used to select an item from a collection of options. Custom content support and filtering are the notable features.

Single

Selected City: {{selectedCity||'none'}}

Content with Filter

Selected Car: {{selectedCar||'none'}}

Import


import {Dropdown} from 'primeng/primeng';

Getting Started

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'});
    }

}

Filtering

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>

Custom Content

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'});
    }
}

Attributes

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.

Events

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.

Styling

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.

Dependencies

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'});
    }

}