Dropdown List Menu Position

Menu position will allow users to configure how dropdown view should be position when on dropdown expand. the following four types are available to configure dropdown, which are:

  • Top Left - Dropdown view appears on top left of the dropdown
  • Top Right - Dropdown view appears on top right of the dropdown
  • Bottom Left - Dropdown view appears on bottom left of the dropdown
  • Bottom Right - Dropdown view appears on top right of the dropdown

What You Will See

Select
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-menu-position-usage',
  templateUrl: './menu-position-usage.component.html'
})
export class MenuPositionUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData();
  }
}

Basic Usage

For change the default dropdown menu position simply bind, menuPosition string into ng-dropdown with any above mention type. default value for this configuration is bottom-left.

  <ng-dropdown
    ...
    [menuPosition]="'bottom-right'">
  </ng-dropdown>
Menu Width & Height
Option Filtering
API Doc for Dropdown Menu Position