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(); } }
<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
Option DisablingLoad Data On Init
API Doc for Option Display