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.

Select
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();
  }
}

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>
Option Disabling
Load Data On Init
API Doc for Option Display