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 items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = 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
Item Filtering
API Doc for Dropdown Menu Position