Dropdown List Option Disabling
This feature can be uses to disable dropdown options by individually and after disabling a specific field ornamentum will disabled the particular field by UI level and restricting to perform any events on disabled fields.
What You Will See
The below example will demonstrates a dropdown option disabling functionality by using Client-side Basic Data Binding operations and hard coded sample data set.
Select
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-option-disabling-usage', templateUrl: './option-disabling-usage.component.html' }) export class OptionDisablingUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { } public checkProductAvailability(): ExampleData[] { const options = this.dataFetchService.fetchStaticData(20, 10); if (options) { options.map((value: ExampleData) => { if (!value.availability) { return !value.availability; } }); return options; } } }
<ng-dropdown [id]="'products_options_01'" [selectTrackBy]="'id'" [displayTrackBy]="'product'" [disabledTrackBy]="'availability'" [options]="checkProductAvailability()"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { OptionDisablingUsageComponent } from './option-disabling-usage.component'; @NgModule({ bootstrap: [OptionDisablingUsageComponent], declarations: [OptionDisablingUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class optionDisablingUsageModule { }
Basic Usage
For disable dropdown option, it is required to provide a true or not empty string field for disabledTrackBy
attribute on particular field whether to indicate an option needs to be disabled. by default disabledTrackBy
field is set it's field name to disabled.
<ng-dropdown ... [disabledTrackBy]="'availability'"> </ng-dropdown>
Suggested Links
EventsDropdown Disabling
API Doc for Dropdown Option Disabling