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 ? selectedCity.name : 'none'}}

Editable

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

Content with Filters

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

Import


import {DropdownModule} 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:'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'}});
    }

}

Model Driven Forms

Dropdown can be used in a model driven form as well.


<p-dropdown [options]="cities" formControlName="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 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'});
    }
}

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

Events

Name Parameters Description
onChange event.originalEvent: Browser event
event.value: Selected option value
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.
ui-dropdown-open Container element when overlay is visible.

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

}