Dropdown List Menu Width and Height

This will allow users to configure the dropdown menu width and height by overriding default dropdown properties.

What You Will See

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

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

Basic Usage

User allow to define dropdown view height and width by manually. for that simply bind menuHeight or menuWidth properties together or individually. 

  <ng-dropdown
    ...
    [menuHeight]="200"
    [menuWidth]="250">
  </ng-dropdown>

Useful Properties

menuHeight: number  
Default Value: 250

Resize the height of dropdown.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData();
  }
}
menuWidth: number  
Default Value: 320

Resize the width of dropdown view.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

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

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData();
  }
}
Menu Position
Filtering
API Doc for Dropdown Menu Width and Height