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

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

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

<ng-dropdown
  [id]="'products_styling_01'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [filterable]="true"
  [menuHeight]="200"
  [menuWidth]="250">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { MenuWidthHeightUsageComponent } from './menu-width-height-usage.component';

@NgModule({
 bootstrap: [MenuWidthHeightUsageComponent],
 declarations: [MenuWidthHeightUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class MenuWidthHeightUsageModule {
}

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

Menu Height

menuHeight: number

Default Value: 250

Resize the height of dropdown.

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

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

<ng-dropdown
  [id]="'products_styling_02'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [filterable]="true"
  [menuHeight]="200">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { MenuHeightUsageComponent } from './menu-height-usage.component';

@NgModule({
 bootstrap: [MenuHeightUsageComponent],
 declarations: [MenuHeightUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class MenuHeightUsageModule {
}

Menu Width

menuWidth: number

Default Value: 320

Resize the width of dropdown view.

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

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

<ng-dropdown
  [id]="'products_styling_03'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [filterable]="true"
  [menuWidth]="250">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { MenuWidthUsageComponent } from './menu-width-usage.component';

@NgModule({
 bootstrap: [MenuWidthUsageComponent],
 declarations: [MenuWidthUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class MenuWidthUsageModule {
}