Dropdown position

Control where the dropdown panel opens relative to the select — top, bottom, or auto based on available space.

TypeScript
HTML

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Component({
    selector: 'ng-dropdown-position-example',
    templateUrl: './dropdown-position-example.component.html',
    styleUrls: ['./dropdown-position-example.component.scss'],
    changeDetection: ChangeDetectionStrategy.Eager,
    imports: [NgSelectComponent],
})
export class DropdownPositionExampleComponent{
    cities = [
        { value: 1, label: 'New York' },
        { value: 2, label: 'London' },
        { value: 3, label: 'Paris' },
    ];
}

<p>By default the dropdown position is set to auto and will be shown above if there is not space placing it at the bottom.</p>

<ng-select [items]="cities"> </ng-select>

<hr />
<p>You can force position to top, right, bottom, or left by setting <b>dropdownPosition</b>.</p>

<ng-select [dropdownPosition]="'top'" [searchable]="false" [items]="cities"> </ng-select>

<hr />
<ng-select [dropdownPosition]="'right'" [searchable]="false" [items]="cities"> </ng-select>

<hr />
<ng-select [dropdownPosition]="'left'" [searchable]="false" [items]="cities"> </ng-select>

API

Inputs used by the examples on this page:

Input	Type	Default	Description
dropdownPosition	`bottom` \| `top` \| `left` \| `right` \| `auto`	`auto`	Set the dropdown position on open. `auto` opens below and flips above when there is not enough room
[items]	`Array<any>`	`[]`	Items array
[searchable]	`boolean`	`true`	Allow to search for value. Default `true`

See the NgSelectComponent API reference for the complete list of inputs and outputs.