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

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

}

Model Driven Forms

Dropdown can be used in a model driven form as well by defining ngFormControl or ngControl.


<p-dropdown [options]="cities" ngControl="selectedCity"></p-dropdown>

Filtering

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>

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

Attributes

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.

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

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

}