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;
    }
  }
}

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>
Events
Dropdown Disabling
API Doc for Dropdown Option Disabling