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-listbox [options]="cities" [(value)]="selectedCities" [filter]="true" filterMatchMode="contains"></p-listbox>

Custom Content

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

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.
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.

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

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 DropdownDemoComponent {

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

}