Dropdown List Option Display Value

Dropdown options are rendered by iterating through the inbound data collection and extracting displayTrackBy field associated property value. By default dropdown will use selectTrackBy field value as displayTrackBy. Please refer dropdown option select track field documentation Select Track By section for more information.

What You Will See

Below example demonstrates the usages of configuring dropdown option display value field.

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-option-display-usage',
  templateUrl: './option-display-value-usage.component.html'
})
export class OptionDisplayValueUsageComponent {
  public options: ExampleData[];

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

<ng-dropdown
  [id]="'products_features_14'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [options]="options"
  [limit]="50">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { OptionDisplayValueUsageComponent } from './option-display-usage.component';

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

According to the above example, displayTrackBy field is set to productType which is used to render dropdown options.

Basic Usage

Use displayTrackBy field to set the dropdown option display value field explicitly.

<ng-dropdown
  ...
  [displayTrackBy]="'productType'">
</ng-dropdown>

Suggested Links